Kako uporabljati React Router V6: Vodnik za začetnike

React Router je najbolj priljubljena knjižnica, ki jo lahko uporabite za implementacijo usmerjanja v aplikacijah React. Zagotavlja pristop, ki temelji na komponentah, za obravnavanje različnih nalog usmerjanja, vključno z navigacijo po straneh, parametri poizvedbe in številnimi drugimi.

React Router V6 uvaja nekaj pomembnih sprememb v algoritmu usmerjanja, da odpravi pasti, ki so bile prisotne v prejšnji različici, in zagotovi izboljšano rešitev usmerjanja.

Začetek usmerjanja z uporabo React Router V6

Za začetek, ustvarite aplikacijo React. Druga možnost je, nastavite projekt React z uporabo Vite. Ko ustvarite projekt, nadaljujte in namestite reagirati-usmerjevalnik-dom paket.

npm install react-router-dom

Ustvarjanje poti z uporabo usmerjevalnika React

Če želite ustvariti poti, začnite tako, da celotno aplikacijo ovijete z a BrowserRouter komponento. Posodobite kodo v svojem index.jsx oz main.jsx datoteko na naslednji način:

import React 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>,
)

Ovijanje komponente aplikacije s komponento BrowserRouter zagotavlja, da celotna aplikacija dobi dostop do konteksta usmerjanja in funkcij, ki jih ponuja knjižnica React Router.

Uporaba komponente Routes

Ko aplikacijo ovijete s komponento BrowserRouter, lahko določite svoje poti.

The Poti komponenta je izboljšava Stikalo komponento, ki jo je prej uporabljal React Router v5. Ta komponenta podpira relativno usmerjanje, samodejno razvrščanje poti in možnost dela z ugnezdenimi potmi.

Običajno boste poti dodali na najvišji ravni vaše aplikacije, pogosto znotraj komponente aplikacije. Vendar pa jih lahko določite na kateri koli drugi lokaciji, odvisno od strukture vašega projekta.

Odprite App.jsx datoteko in zamenjajte kodo React na osnovi z naslednjim:

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

Ta konfiguracija usmerjanja preslika določene poti URL do ustreznih komponent strani (nadzorna plošča in O), ki zagotavlja, da aplikacija upodobi ustrezno komponento, ko uporabnik obišče določeno URL.

Upoštevajte element prop znotraj komponente Route, ki vam omogoča posredovanje funkcionalne komponente v nasprotju s samo imenom komponente. To omogoča podajanje rekvizitov po progah in z njimi povezanih komponent.

V src imenik, ustvarite novega strani in dodajte dve novi datoteki: Nadzorna plošča.jsx in About.jsx. Nadaljujte in definirajte funkcionalne komponente v teh datotekah, da preizkusite poti.

Uporaba createBrowserRouter za definiranje poti

React Routerjeva dokumentacija priporoča uporabo createBrowserRouter komponento za definiranje konfiguracije usmerjanja za spletne aplikacije React. Ta komponenta je lahka alternativa BrowserRouter ki za svoj argument vzame niz poti.

Z uporabo te komponente vam ni treba definirati poti v komponenti aplikacije. Namesto tega lahko opišete vse svoje konfiguracije poti znotraj index.jsx oz main.jsx mapa.

Tukaj je primer, kako lahko uporabite to komponento:

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 usmerjanja uporablja createBrowserRouter in RouterProvider komponente za ustvarjanje sistema usmerjanja za aplikacijo React.

Vendar je edina razlika pri tej izvedbi ta, da namesto ovijanja aplikacije s komponento BrowserRouter uporablja RouterProvider komponento za prenos Usmerjevalnik kontekst za vse komponente v aplikaciji.

Implementacija poti strani, ki ni najdena

The pot prop v komponenti Route primerja podano pot s trenutnim URL-jem, da ugotovi, ali obstaja ujemanje, preden upodablja zahtevano komponento.

Če želite obravnavati primere, ko se nobena pot ne ujema, lahko ustvarite posebno pot, ki bo upravljala Napake 404 stran ni najdena. Vključitev te poti zagotavlja, da lahko uporabniki prejmejo smiselne odgovore v primerih, ko so dostopali do neobstoječega URL-ja.

Če želite implementirati pot 404, dodajte to pot v komponento Routes:

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

Nato ustvarite po meri NotFound.jsx komponento in končno, slog komponente z uporabo modulov CSS.

Zvezdica (*) je nadomestni znak, ki obravnava scenarije, kjer se nobena od navedenih poti ne ujema s trenutnim URL-jem.

Programska navigacija z uporabo kljuke useNavigate

The useNavigate hook zagotavlja programski način za upravljanje navigacije v aplikacijah. Ta kljuka je še posebej uporabna, če želite sprožiti navigacijo kot odziv na uporabniške interakcije ali dogodke, kot so kliki gumbov ali oddaje obrazcev.

Oglejmo si, kako uporabljati useNavigate kavelj za programsko navigacijo. Ob predpostavki, da ste ustvarili About.jsx funkcionalno komponento, uvozite kavelj iz paketa React Router:

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

Nato dodajte gumb, ki ob kliku sproži navigacijo do določene poti.

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

 </>
 );
}
exportdefault About;

Omeniti velja, da kavelj useNavigate in kavelj useNavigation, uveden v React Router v6, služita različnim namenom kljub tesno povezanima imenoma.

Kavelj useNavigation vam omogoča dostop do podrobnosti, povezanih z navigacijo, kot je trenutno stanje navigacije in druge posebnosti. To je uporabno, če želite upodobiti elemente uporabniškega vmesnika, kot je nalaganje vrtavk, da zagotovite vizualne povratne informacije o tekočih procesih.

Tukaj je primer, kako lahko uporabite kljuko 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>;
}

V tem primeru je SubmitButton komponenta bo dinamično posodabljala svoje besedilo na podlagi navigacijskega stanja, pridobljenega s kljuko useNavigation.

Čeprav imajo te kljuke različne vloge, jih lahko še vedno uporabljate skupaj. Kavelj useNavigate za sprožitev navigacijskega postopka in kavelj useNavigation za pridobivanje navigacijskih podrobnosti v realnem času, ki nato usmerjajo vrsto povratnega uporabniškega vmesnika za upodabljanje v brskalniku.

Uporaba useRoutes Hook

Ta kavelj vam omogoča definiranje poti poti poleg njihovih ustreznih komponent znotraj objekta. Kasneje se kavelj nato uporabi za ujemanje poti in prikaz ustreznih komponent.

Tukaj je preprost primer, kako uporabljati kavelj:

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;

V tem primeru je poti object definira preslikavo poti URL v komponente. The aplikacija komponenta nato uporabi to kavelj za ujemanje s trenutnim URL-jem in upodobitev ustrezne komponente na podlagi ujemajoče se poti.

Uporaba tega kljuka vam omogoča natančen nadzor nad logiko usmerjanja in omogoča enostavno ustvarjanje logike za upravljanje poti po meri za vašo aplikacijo.

Upravljanje z usmerjanjem v aplikacijah React

Čeprav React sam po sebi ne vključuje vnaprej vgrajenega mehanizma za obravnavanje nalog usmerjanja, React Router zapolnjuje to vrzel. Ponuja različne usmerjevalne komponente in pomožne funkcije, ki jih lahko preprosto uporabite za ustvarjanje interaktivnih, uporabniku prijaznih aplikacij.