Hur man använder React Router V6: En nybörjarguide

React Router är det mest populära biblioteket du kan använda för att implementera routing i React-applikationer. Det ger ett komponentbaserat tillvägagångssätt för att hantera en mängd olika routinguppgifter, inklusive sidnavigering, frågeparametrar och många fler.

React Router V6 introducerar några betydande ändringar i routingalgoritmen för att åtgärda fallgropar som fanns i dess tidigare version, och ge en förbättrad routinglösning.

Komma igång med routing med React Router V6

För att starta, skapa en React-applikation. Alternativt skapa ett React-projekt med Vite. När du har skapat projektet, fortsätt och installera reagera-router-dom paket.

npm install react-router-dom

Skapa rutter med hjälp av React Router

För att skapa rutter, börja med att slå in hela applikationen med en BrowserRouter komponent. Uppdatera koden i din index.jsx eller main.jsx fil enligt följande:

import React from'react'
import ReactDOM 





instagram viewer

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

Att linda in appkomponenten med BrowserRouter-komponenten säkerställer att hela applikationen får tillgång till routingkontexten och funktionerna som erbjuds av React Router-biblioteket.

Använda rutterkomponenten

När du har packat programmet med BrowserRouter-komponenten kan du definiera dina rutter.

De Rutter komponenten är en förbättring av Växla komponent som tidigare användes av React Router v5. Den här komponenten stöder relativ routing, automatisk ruttrankning och möjligheten att arbeta med kapslade rutter.

Vanligtvis lägger du till rutter på den högsta nivån i din applikation, ofta inom appkomponenten. Du kan dock definiera dem på vilken annan plats som helst, beroende på ditt projekts struktur.

Öppna App.jsx arkivera och byt ut pannplattan React-koden med följande:

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

Denna routingkonfiguration mappar specifika URL-sökvägar till motsvarande sidkomponenter (Dashboard och Om), vilket säkerställer att appen återger lämplig komponent när en användare besöker en viss URL.

Lägg märke till element prop, inom Route-komponenten, som låter dig skicka en funktionell komponent i motsats till bara komponentens namn. Detta gör det möjligt att skicka rekvisita längs vägarna och deras tillhörande komponenter.

I den src katalog, skapa en ny sidor katalog och lägg till två nya filer: Dashboard.jsx och About.jsx. Fortsätt och definiera funktionella komponenter i dessa filer för att testa rutterna.

Använda createBrowserRouter för att definiera rutter

Reagera routerns dokumentation rekommenderar att du använder skapaBrowserRouter komponent för att definiera routingkonfigurationen för React-webbapplikationer. Denna komponent är ett lättviktsalternativ till BrowserRouter som tar en rad rutter som argument.

Genom att använda den här komponenten behöver du inte definiera dina rutter i appkomponenten. Istället kan du beskriva alla dina ruttkonfigurationer inom index.jsx eller main.jsx fil.

Här är ett exempel på hur du kan använda den här komponenten:

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

Routningskonfigurationen använder skapaBrowserRouter och RouterProvider komponenter för att skapa ett routingsystem för en React-applikation.

Den enda skillnaden med den här implementeringen är dock att istället för att linda in applikationen med BrowserRouter-komponenten, använder den RouterProvider komponent för att passera Router sammanhang till alla komponenter i applikationen.

Implementera Page-Not-Found-rutter

De väg prop i ruttkomponenten jämför den angivna sökvägen med den aktuella URL: en för att avgöra om det finns en matchning innan den nödvändiga komponenten renderas.

För att hantera fall där inga rutter matchar kan du skapa en specifik rutt som kommer att hantera 404 sidan hittades inte fel. Att inkludera denna rutt säkerställer att användare kan få meningsfulla svar i situationer där de har fått åtkomst till en obefintlig URL.

För att implementera en 404-rutt, lägg till den här rutten i komponenten Rutter:

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

Skapa sedan en anpassad NotFound.jsx komponent och slutligen, utforma komponenten med CSS-moduler.

Asterisken (*) är ett jokertecken som hanterar scenarier där ingen av de angivna rutterna matchar den aktuella URL: en.

Programmatisk navigering Använda useNavigate Hook

De användNavigera hook ger ett programmatiskt sätt att hantera navigering i applikationer. Den här kroken är särskilt användbar när du vill aktivera navigering som svar på användarinteraktioner eller händelser, såsom knappklick eller formulärinlämningar.

Låt oss ta en titt på hur man använder användNavigera krok för programmatisk navigering. Förutsatt att du skapade About.jsx funktionell komponent, importera kroken från React Router-paketet:

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

Lägg sedan till en knapp som, när den klickas, utlöser navigeringen till en angiven rutt.

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

 </>
 );
}
exportdefault About;

Det är värt att nämna att useNavigate-kroken och useNavigation-kroken, som introducerades i React Router v6, tjänar distinkta syften trots deras närbesläktade namn.

UseNavigation-kroken ger dig tillgång till detaljer relaterade till navigering, som det pågående navigeringsläget och andra detaljer. Detta är användbart när du vill rendera UI-element som laddningsspinnare för att ge visuell feedback om pågående processer.

Här är ett exempel på hur du kan använda useNavigation-kroken.

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 det här exemplet är Skickaknapp komponent kommer dynamiskt att uppdatera sin text baserat på navigationstillståndet som erhålls från useNavigation-kroken.

Även om dessa krokar har olika roller kan du fortfarande använda dem tillsammans. UseNavigate-kroken för att initiera navigeringsprocessen och useNavigation-kroken för att hämta navigeringsdetaljer i realtid, som sedan styr vilken typ av feedback-gränssnitt som ska återges i webbläsaren.

Använda useRoutes Hook

Den här kroken låter dig definiera ruttvägarna tillsammans med deras motsvarande komponenter inom ett objekt. Därefter används kroken för att matcha rutterna och visa relevanta komponenter.

Här är ett enkelt exempel på hur du använder kroken:

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 det här exemplet är rutter objekt definierar mappningen av URL-sökvägar till komponenter. De App komponenten använder sedan denna krok för att matcha den aktuella webbadressen och rendera lämplig komponent baserat på den matchade rutten.

Genom att använda denna krok får du detaljerad kontroll över din routinglogik och låter dig enkelt skapa anpassad rutthanteringslogik för din applikation.

Hantera routing i React-applikationer

Även om React i sig inte inkluderar en förbyggd mekanism för att hantera routinguppgifter, fyller React Router detta tomrum. Den tillhandahåller olika routingkomponenter och verktygsfunktioner som du enkelt kan använda för att skapa interaktiva, användarvänliga applikationer.