React Router V6:n käyttäminen: Aloittelijan opas

React Router on suosituin kirjasto, jota voit käyttää reitityksen toteuttamiseen React-sovelluksissa. Se tarjoaa komponenttipohjaisen lähestymistavan erilaisten reititystehtävien hoitamiseen, mukaan lukien sivulla navigointi, kyselyparametrit ja monet muut.

React Router V6 tuo joitain merkittäviä muutoksia reititysalgoritmiin korjatakseen sen aiemmassa versiossa esiintyneet sudenkuopat ja tarjotakseen parannetun reititysratkaisun.

Reitityksen aloittaminen React Router V6:lla

Aloita luo React-sovellus. Vaihtoehtoisesti perustaa React-projekti Viten avulla. Kun olet luonut projektin, siirry eteenpäin ja asenna react-router-dom paketti.

npm install react-router-dom

Reittien luominen React Routerin avulla

Reittien luominen aloitetaan käärimällä koko sovellus kirjaimella a BrowserRouter komponentti. Päivitä koodi omassasi index.jsx tai main.jsx tiedosto seuraavasti:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';

instagram viewer
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Sovelluskomponentin kääriminen BrowserRouter-komponenttiin varmistaa, että koko sovellus saa pääsyn React Router -kirjaston tarjoamiin reitityskontekstiin ja ominaisuuksiin.

Routes-komponentin käyttäminen

Kun olet käärinyt sovelluksen BrowserRouter-komponenttiin, voit määrittää reitit.

The Reitit komponentti on parannus Vaihtaa komponentti, jota aiemmin käytti React Router v5. Tämä komponentti tukee suhteellista reititystä, automaattista reittien luokittelua ja kykyä työskennellä sisäkkäisten reittien kanssa.

Yleensä lisäät reitit sovelluksesi korkeimmalla tasolla, usein App-komponentin sisällä. Voit kuitenkin määrittää ne missä tahansa muussa paikassa projektisi rakenteesta riippuen.

Avaa App.jsx tiedosto ja korvaa kattilalevy Reaktiokoodi seuraavalla:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Tämä reititysmääritys kartoittaa tietyt URL-osoitteet vastaaviin sivukomponentteihin (hallintapaneeli ja Tietoja), varmistamalla, että sovellus tekee oikean komponentin, kun käyttäjä vierailee tietyssä paikassa URL-osoite.

Huomaa, elementti prop, Route-komponentin sisällä, jonka avulla voit välittää toiminnallisen komponentin sen sijaan, että voit välittää vain komponentin nimen. Tämä mahdollistaa rekvisiitin ja niihin liittyvien komponenttien välittämisen.

Vuonna src hakemistoon, luo uusi sivuja hakemistoon ja lisää kaksi uutta tiedostoa: Dashboard.jsx ja About.jsx. Mene eteenpäin ja määritä toiminnalliset komponentit näihin tiedostoihin testataksesi reittejä.

CreateBrowserRouterin käyttö reittien määrittämiseen

Reagoi reitittimen dokumentaatioon suosittelee käyttämään luodaBrowserRouter komponentti, joka määrittää React-verkkosovellusten reitityskokoonpanon. Tämä komponentti on kevyt vaihtoehto BrowserRouter jonka argumenttina on joukko reittejä.

Käyttämällä tätä komponenttia sinun ei tarvitse määrittää reittejäsi sovelluskomponentissa. Sen sijaan voit hahmotella kaikki reittisi määritykset index.jsx tai main.jsx tiedosto.

Tässä on esimerkki siitä, kuinka voit käyttää tätä komponenttia:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

Reititysmääritys käyttää luodaBrowserRouter ja RouterProvider komponentteja reititysjärjestelmän luomiseksi React-sovellukselle.

Ainoa ero tässä toteutuksessa on kuitenkin se, että sen sijaan, että se kääriisi sovelluksen käyttämällä BrowserRouter-komponenttia, se käyttää RouterProvider komponentti läpäisemään Reititin yhteydessä kaikkiin sovelluksen komponentteihin.

Sivua ei löydy -reittien käyttöönotto

The polku Reitti-komponentin prop vertaa annettua polkua nykyiseen URL-osoitteeseen määrittääkseen, löytyykö vastinetta ennen vaaditun komponentin hahmontamista.

Jos haluat käsitellä tapauksia, joissa ei täsmää reittejä, voit luoda tietyn reitin, joka hallitsee 404 sivua ei löytynyt virheitä. Tämän reitin sisällyttäminen varmistaa, että käyttäjät voivat saada merkityksellisiä vastauksia tilanteissa, joissa he ovat käyttäneet olematonta URL-osoitetta.

Jos haluat ottaa käyttöön 404-reitin, lisää tämä reitti Reitit-komponenttiin:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Luo sitten mukautettu NotFound.jsx komponentti ja lopuksi muotoile komponenttia CSS-moduuleilla.

Tähti (*) on jokerimerkki, joka käsittelee skenaarioita, joissa mikään määritetyistä reiteistä ei vastaa nykyistä URL-osoitetta.

Ohjelmallinen navigointi useNavigate Hookin avulla

The käytä Navigoi koukku tarjoaa ohjelmallisen tavan käsitellä navigointia sovelluksissa. Tämä koukku on erityisen hyödyllinen, kun haluat käynnistää navigoinnin vastauksena käyttäjän vuorovaikutukseen tai tapahtumiin, kuten painikkeiden napsautuksiin tai lomakkeiden lähetyksiin.

Katsotaanpa, kuinka käyttää käytä Navigoi koukku ohjelmalliseen navigointiin. Olettaen, että loit About.jsx toiminnallinen komponentti, tuo koukku React Router -paketista:

import { useNavigate } from'react-router-dom';

Lisää sitten painike, jota napsautettuna käynnistää navigoinnin tietylle reitille.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

On syytä mainita, että React Router v6:ssa käyttöön otetut useNavigate hook ja useNavigation hook palvelevat eri tarkoituksia huolimatta läheisesti liittyvistä nimistä.

UseNavigation-koukun avulla voit tarkastella navigointiin liittyviä tietoja, kuten käynnissä olevan navigoinnin tilaa ja muita yksityiskohtia. Tämä on hyödyllistä, kun haluat renderöidä käyttöliittymäelementtejä, kuten latauspyöriä, jotta saat visuaalista palautetta käynnissä olevista prosesseista.

Tässä on esimerkki siitä, kuinka voit käyttää useNavigation-koukkua.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

Tässä esimerkissä Lähetä-painike komponentti päivittää tekstinsä dynaamisesti useNavigation-koukusta saadun navigointitilan perusteella.

Vaikka näillä koukuilla on eri roolit, voit silti käyttää niitä yhdessä. UseNavigate-koukku aloittaa navigointiprosessin ja useNavigation-koukku hakee reaaliaikaisia ​​navigointitietoja, jotka sitten ohjaavat selaimessa hahmonnettavan palautekäyttöliittymän tyyppiä.

UseRoutes Hookin käyttäminen

Tämän koukun avulla voit määrittää reittipolut niiden vastaavien komponenttien rinnalla objektin sisällä. Myöhemmin koukkua käytetään sitten sovittamaan reitit ja näyttämään asiaankuuluvat komponentit.

Tässä on yksinkertainen esimerkki koukun käytöstä:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

Tässä esimerkissä reitit objekti määrittää URL-polkujen yhdistämisen komponentteihin. The Sovellus komponentti käyttää sitten tätä koukkua täsmäyttääkseen nykyisen URL-osoitteen ja hahmontaakseen sopivan komponentin vastaavan reitin perusteella.

Tämän koukun avulla voit hallita tarkasti reitityslogiikkaa ja luoda helposti mukautettua reitinkäsittelylogiikkaa sovelluksellesi.

Reitityksen käsittely React-sovelluksissa

Vaikka React itsessään ei sisällä valmiiksi rakennettua mekanismia reititystehtävien käsittelemiseksi, React Router täyttää tämän aukon. Se tarjoaa erilaisia ​​reitityskomponentteja ja aputoimintoja, joiden avulla voit helposti luoda interaktiivisia, käyttäjäystävällisiä sovelluksia.