Kako koristiti React Router V6: Vodič za početnike

React Router je najpopularnija biblioteka koju možete koristiti za implementaciju usmjeravanja u React aplikacijama. Omogućuje pristup baziran na komponentama za rukovanje raznim zadacima usmjeravanja, uključujući navigaciju stranicama, parametre upita i još mnogo toga.

React Router V6 uvodi neke značajne promjene u algoritam usmjeravanja, kako bi se riješile zamke koje su bile prisutne u njegovoj ranijoj verziji i pružilo poboljšano rješenje za usmjeravanje.

Početak rada s usmjeravanjem pomoću React Routera V6

Započeti, izraditi React aplikaciju. Alternativno, postaviti React projekt koristeći Vite. Nakon izrade projekta, samo naprijed i instalirajte reagirati-usmjerivač-dom paket.

npm install react-router-dom

Stvaranje ruta pomoću React Routera

Za izradu ruta, počnite omotavanjem cijele aplikacije s a BrowserRouter komponenta. Ažurirajte kôd u svom indeks.jsx ili glavni.jsx datoteku na sljedeći način:

import React 





instagram viewer

from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



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

Umotavanje komponente aplikacije s komponentom BrowserRouter osigurava da cijela aplikacija dobije pristup kontekstu usmjeravanja i značajkama koje nudi biblioteka React Router.

Korištenje komponente ruta

Nakon što aplikaciju omotate komponentom BrowserRouter, možete definirati svoje rute.

The Rute komponenta je poboljšanje Sklopka komponenta koju je prethodno koristio React Router v5. Ova komponenta podržava relativno usmjeravanje, automatsko rangiranje ruta i mogućnost rada s ugniježđenim rutama.

Obično ćete rute dodati na najvišoj razini svoje aplikacije, često unutar komponente aplikacije. Međutim, možete ih definirati na bilo kojem drugom mjestu, ovisno o strukturi vašeg projekta.

Otvori App.jsx datoteku i zamijenite predložak React koda sljedećim:

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

Ova konfiguracija usmjeravanja preslikava određene URL staze do odgovarajućih komponenti stranice (Nadzorna ploča i O), osiguravajući da aplikacija prikazuje odgovarajuću komponentu kada korisnik posjeti određenu URL.

Primijetite element prop, unutar komponente Route, koja vam omogućuje prosljeđivanje funkcionalne komponente umjesto samo naziva komponente. To omogućuje prenošenje rekvizita niz staze i njihove povezane komponente.

u src imenik, stvorite novi stranice direktorij i dodajte dvije nove datoteke: Nadzorna ploča.jsx i About.jsx. Samo naprijed i definirajte funkcionalne komponente unutar ovih datoteka da testirate rute.

Korištenje createBrowserRouter za definiranje ruta

Dokumentacija React Routera preporučuje korištenje createBrowserRouter komponenta za definiranje konfiguracije usmjeravanja za React web aplikacije. Ova komponenta je lagana alternativa BrowserRouter koji kao svoj argument uzima niz ruta.

Korištenjem ove komponente nema potrebe za definiranjem ruta unutar komponente aplikacije. Umjesto toga, možete ocrtati sve svoje konfiguracije Rute unutar indeks.jsx ili glavni.jsx datoteka.

Evo primjera kako možete koristiti ovu komponentu:

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>
);

Konfiguracija usmjeravanja koristi createBrowserRouter i RouterProvider komponente za stvaranje sustava usmjeravanja za React aplikaciju.

Međutim, jedina razlika s ovom implementacijom je ta što, umjesto omatanja aplikacije pomoću komponente BrowserRouter, ona koristi RouterProvider komponenta za prolaz Usmjerivač kontekst za sve komponente u aplikaciji.

Implementacija ruta stranica koje nisu pronađene

The staza prop u komponenti Ruta uspoređuje pruženu stazu s trenutnim URL-om kako bi utvrdio postoji li podudaranje prije iscrtavanja potrebne komponente.

Za rješavanje slučajeva u kojima se rute ne podudaraju, možete stvoriti određenu rutu koja će upravljati 404 pogreške stranice nisu pronađene. Uključivanje ove rute osigurava da korisnici mogu dobiti smislene odgovore u situacijama kada su pristupili nepostojećem URL-u.

Da biste implementirali rutu 404, dodajte ovu rutu unutar komponente Rute:

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

Zatim stvorite prilagođeni NotFound.jsx komponenta i na kraju, stilizirajte komponentu pomoću CSS modula.

Zvjezdica (*) je zamjenski znak koji upravlja scenarijima u kojima niti jedna od navedenih ruta ne odgovara trenutnom URL-u.

Programska navigacija korištenjem kuke useNavigate

The useNavigate hook pruža programski način za upravljanje navigacijom u aplikacijama. Ova kuka je posebno korisna kada želite pokrenuti navigaciju kao odgovor na korisničke interakcije ili događaje, kao što su klikovi na gumbe ili podnošenje obrazaca.

Pogledajmo kako koristiti useNavigate kuka za programsku navigaciju. Pod pretpostavkom da ste stvorili About.jsx funkcionalna komponenta, uvezite kuku iz paketa React Router:

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

Zatim dodajte gumb koji, kada se pritisne, pokreće navigaciju do određene rute.

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

 </>
 );
}
exportdefault About;

Vrijedno je spomenuti da useNavigate hook i useNavigation hook, uvedeni u React Router v6, služe različitim svrhama unatoč blisko povezanim nazivima.

UseNavigation hook vam omogućuje pristup detaljima koji se odnose na navigaciju, kao što je trenutno stanje navigacije i druge specifičnosti. Ovo je korisno kada želite renderirati elemente korisničkog sučelja kao što su učitavanje pokretača za pružanje vizualnih povratnih informacija o procesima koji su u tijeku.

Evo primjera kako možete upotrijebiti kuku useNavigation.

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>;
}

U ovom primjeru, SubmitButton komponenta će dinamički ažurirati svoj tekst na temelju stanja navigacije dobivenog iz kuke useNavigation.

Iako ove udice imaju različite uloge, još uvijek ih možete koristiti zajedno. UseNavigate hook za pokretanje navigacijskog procesa i useNavigation hook za dohvaćanje navigacijskih detalja u stvarnom vremenu, koji zatim vode vrstu povratnog korisničkog sučelja za prikaz u pregledniku.

Korištenje kuke useRoutes

Ova kuka vam omogućuje definiranje staza rute uz njihove odgovarajuće komponente unutar objekta. Zatim se kuka koristi za usklađivanje ruta i prikaz relevantnih komponenti.

Evo jednostavnog primjera kako koristiti kuku:

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;

U ovom primjeru, rute objekt definira mapiranje URL staza na komponente. The aplikacija komponenta zatim koristi ovu kuku za podudaranje s trenutnim URL-om i renderiranje odgovarajuće komponente na temelju usklađene rute.

Korištenje ove kuke daje vam detaljnu kontrolu nad vašom logikom usmjeravanja i omogućuje vam jednostavno stvaranje prilagođene logike upravljanja rutom za vašu aplikaciju.

Rukovanje usmjeravanjem u React aplikacijama

Iako sam React ne uključuje unaprijed izgrađeni mehanizam za rukovanje zadacima usmjeravanja, React Router ispunjava ovu prazninu. Omogućuje različite komponente usmjeravanja i pomoćne funkcije koje možete jednostavno koristiti za stvaranje interaktivnih, korisniku prilagođenih aplikacija.