Sådan bruges React Router V6: En begyndervejledning

React Router er det mest populære bibliotek, du kan bruge til at implementere routing i React-applikationer. Det giver en komponentbaseret tilgang til håndtering af en række routingopgaver, herunder sidenavigation, forespørgselsparametre og mange flere.

React Router V6 introducerer nogle væsentlige ændringer til routingalgoritmen for at løse de faldgruber, der var til stede i dens tidligere version, og give en forbedret routingløsning.

Kom godt i gang med routing ved hjælp af React Router V6

For at komme i gang, oprette en React-applikation. Alternativt opsæt et React-projekt ved hjælp af Vite. Når du har oprettet projektet, skal du gå videre og installere reagere-router-dom pakke.

npm install react-router-dom

Oprettelse af ruter ved hjælp af React Router

For at oprette ruter, start med at pakke hele applikationen ind med en BrowserRouter komponent. Opdater koden i din index.jsx eller main.jsx fil som følger:

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

Indpakning af app-komponenten med BrowserRouter-komponenten sikrer, at hele applikationen får adgang til routingkonteksten og funktioner, der tilbydes af React Router-biblioteket.

Brug af rutekomponenten

Når du har pakket applikationen med BrowserRouter-komponenten, kan du definere dine ruter.

Det Ruter komponent er en forbedring af Kontakt komponent, som tidligere blev brugt af React Router v5. Denne komponent understøtter relativ routing, automatisk ruterangering og muligheden for at arbejde med indlejrede ruter.

Typisk vil du tilføje ruter på det højeste niveau af din applikation, ofte inden for app-komponenten. Du kan dog definere dem på et hvilket som helst andet sted, afhængigt af dit projekts struktur.

Åbn App.jsx fil og udskift kedelpladen React-koden med følgende:

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

Denne routingkonfiguration kortlægger specifikke URL-stier til de tilsvarende sidekomponenter (Dashboard og Om), der sikrer, at appen gengiver den relevante komponent, når en bruger besøger en bestemt URL.

Læg mærke til element prop, inden for rutekomponenten, som lader dig sende en funktionel komponent i modsætning til kun komponentens navn. Dette gør det muligt at sende rekvisitter ned ad ruterne og deres tilhørende komponenter.

I den src mappe, skal du oprette en ny sider mappe, og tilføj to nye filer: Dashboard.jsx og About.jsx. Gå videre og definer funktionelle komponenter i disse filer for at teste ruterne.

Brug createBrowserRouter til at definere ruter

React Routers dokumentation anbefaler at bruge opretteBrowserRouter komponent til at definere routing-konfigurationen for React-webapplikationer. Denne komponent er et letvægts alternativ til BrowserRouter som tager en række ruter som argument.

Ved at bruge denne komponent er der ingen grund til at definere dine ruter i App-komponenten. I stedet kan du skitsere alle dine rutekonfigurationer inden for index.jsx eller main.jsx fil.

Her er et eksempel på, hvordan du kan bruge denne komponent:

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

Routing-konfigurationen bruger opretteBrowserRouter og RouterProvider komponenter til at skabe et routingsystem til en React-applikation.

Den eneste forskel med denne implementering er dog, at i stedet for at indpakke applikationen ved hjælp af BrowserRouter-komponenten, bruger den RouterProvider komponent til at bestå Router kontekst til alle komponenterne i applikationen.

Implementering af Page-Not-Found-ruter

Det sti prop i rutekomponenten sammenligner den angivne sti med den aktuelle URL for at afgøre, om der er et match, før den påkrævede komponent gengives.

For at håndtere sager, hvor ingen ruter matcher, kan du oprette en specifik rute, der vil administrere 404 side ikke fundet fejl. Inkludering af denne rute sikrer, at brugere kan modtage meningsfulde svar i situationer, hvor de har fået adgang til en ikke-eksisterende URL.

For at implementere en 404-rute skal du tilføje denne rute i komponenten Ruter:

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

Opret derefter en brugerdefineret NotFound.jsx komponent og endelig, style komponenten ved hjælp af CSS-moduler.

Stjernen (*) er et jokertegn, der håndterer scenarier, hvor ingen af ​​de angivne ruter matcher den aktuelle URL.

Programmatisk navigation Brug af useNavigate Hook

Det brug Naviger hook giver en programmatisk måde at håndtere navigation i applikationer på. Denne krog er især nyttig, når du ønsker at udløse navigation som reaktion på brugerinteraktioner eller hændelser, såsom knapklik eller formularindsendelser.

Lad os tage et kig på, hvordan man bruger brug Naviger krog til programmatisk navigation. Forudsat at du har oprettet About.jsx funktionel komponent, importer krogen fra React Router-pakken:

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

Tilføj derefter en knap, der, når der klikkes på den, udløser navigationen til en specificeret rute.

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

 </>
 );
}
exportdefault About;

Det er værd at nævne, at useNavigate-krogen og useNavigation-krogen, introduceret i React Router v6, tjener forskellige formål på trods af deres tæt beslægtede navne.

UseNavigation-krogen giver dig adgang til detaljer relateret til navigation, såsom den igangværende navigationstilstand og andre detaljer. Dette er nyttigt, når du vil gengive UI-elementer, såsom indlæsning af spinnere, for at give visuel feedback om igangværende processer.

Her er et eksempel på, hvordan du kan bruge useNavigation-krogen.

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

I dette eksempel er Indsend-knap komponent vil dynamisk opdatere sin tekst baseret på navigationstilstanden opnået fra useNavigation-krogen.

Selvom disse kroge har forskellige roller, kan du stadig bruge dem sammen. UseNavigate-krogen til at starte navigationsprocessen og useNavigation-krogen til at hente navigationsdetaljer i realtid, som derefter guider den slags feedback-brugergrænseflade, der skal gengives i browseren.

Brug af useRoutes Hook

Denne krog lader dig definere rutestierne sammen med deres tilsvarende komponenter i et objekt. Efterfølgende bruges krogen så til at matche ruterne og vise de relevante komponenter.

Her er et simpelt eksempel på, hvordan du bruger krogen:

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;

I dette eksempel er ruter objekt definerer tilknytningen af ​​URL-stier til komponenter. Det App komponent bruger derefter denne hook til at matche den aktuelle URL og gengive den passende komponent baseret på den matchede rute.

Brug af denne krog giver dig detaljeret kontrol over din routinglogik og giver dig mulighed for nemt at oprette tilpasset rutehåndteringslogik til din applikation.

Håndtering af routing i React-applikationer

Selvom React i sig selv ikke inkluderer en forudbygget mekanisme til håndtering af routingopgaver, udfylder React Router dette hul. Det giver forskellige routing-komponenter og hjælpefunktioner, som du nemt kan bruge til at skabe interaktive, brugervenlige applikationer.