Slik bruker du React Router V6: En nybegynnerveiledning

React Router er det mest populære biblioteket du kan bruke til å implementere ruting i React-applikasjoner. Det gir en komponentbasert tilnærming til å håndtere en rekke rutingoppgaver, inkludert sidenavigering, spørringsparametere og mange flere.

React Router V6 introduserer noen betydelige endringer i rutingalgoritmen, for å adressere fallgruvene som var til stede i den tidligere versjonen, og gi en forbedret rutingløsning.

Komme i gang med ruting ved hjelp av React Router V6

For å komme i gang, opprette en React-applikasjon. Alternativt sette opp et React-prosjekt ved hjelp av Vite. Etter å ha opprettet prosjektet, fortsett og installer reager-ruter-dom pakke.

npm install react-router-dom

Opprette ruter ved hjelp av React Router

For å lage ruter, start med å pakke inn hele applikasjonen med en Nettleserruter komponent. Oppdater koden i din index.jsx eller main.jsx fil som følger:

import React from'react'





instagram viewer


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

Å pakke inn App-komponenten med BrowserRouter-komponenten sikrer at hele applikasjonen får tilgang til rutingkonteksten og funksjonene som tilbys av React Router-biblioteket.

Bruke rutekomponenten

Når du har pakket applikasjonen med BrowserRouter-komponenten, kan du definere rutene dine.

De Ruter komponenten er en forbedring av Bytte om komponent som tidligere ble brukt av React Router v5. Denne komponenten støtter relativ ruting, automatisk ruterangering og muligheten til å jobbe med nestede ruter.

Vanligvis vil du legge til ruter på det høyeste nivået av applikasjonen din, ofte innenfor app-komponenten. Du kan imidlertid definere dem på et hvilket som helst annet sted, avhengig av prosjektets struktur.

Åpne App.jsx fil og bytt ut reaktorkoden 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 rutingkonfigurasjonen tilordner spesifikke URL-baner til de tilsvarende sidekomponentene (Dashboard og Om), for å sikre at appen gjengir den riktige komponenten når en bruker besøker en bestemt URL.

Legg merke til element prop, i rutekomponenten, som lar deg sende en funksjonell komponent i motsetning til bare komponentens navn. Dette gjør det mulig å sende rekvisitter nedover rutene og tilhørende komponenter.

I src katalog, opprette en ny sider katalog, og legg til to nye filer: Dashboard.jsx og About.jsx. Fortsett og definer funksjonelle komponenter i disse filene for å teste ut rutene.

Bruke createBrowserRouter til å definere ruter

React Routers dokumentasjon anbefaler å bruke createBrowserRouter komponent for å definere rutingkonfigurasjonen for React-webapplikasjoner. Denne komponenten er et lett alternativ til Nettleserruter som tar en rekke ruter som argument.

Ved å bruke denne komponenten er det ikke nødvendig å definere rutene dine i app-komponenten. I stedet kan du skissere alle dine rutekonfigurasjoner i index.jsx eller main.jsx fil.

Her er et eksempel på hvordan du kan bruke denne 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>
);

Rutingkonfigurasjonen bruker createBrowserRouter og RouterProvider komponenter for å lage et rutingsystem for en React-applikasjon.

Den eneste forskjellen med denne implementeringen er imidlertid at i stedet for å pakke inn applikasjonen ved hjelp av BrowserRouter-komponenten, bruker den RouterProvider komponent for å passere Ruter kontekst til alle komponentene i applikasjonen.

Implementering av Page-Not-Found-ruter

De sti prop i rutekomponenten sammenligner den angitte banen med gjeldende URL for å finne ut om det er samsvar før den nødvendige komponenten gjengis.

For å håndtere tilfeller der ingen ruter samsvarer, kan du opprette en spesifikk rute som skal administrere 404 side ikke funnet feil. Å inkludere denne ruten sikrer at brukere kan motta meningsfulle svar i situasjoner der de har fått tilgang til en ikke-eksisterende URL.

For å implementere en 404-rute, legg til denne ruten i ruter-komponenten:

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

Deretter oppretter du en egendefinert NotFound.jsx komponent og til slutt, stil komponenten ved å bruke CSS-moduler.

Stjernen (*) er et jokertegn som håndterer scenarier der ingen av de angitte rutene samsvarer med gjeldende URL.

Programmatisk navigering Bruke useNavigate Hook

De brukNaviger krok gir en programmatisk måte å håndtere navigering i applikasjoner. Denne kroken er spesielt nyttig når du vil utløse navigasjon som svar på brukerinteraksjoner eller hendelser, for eksempel knappeklikk eller skjemainnsendinger.

La oss ta en titt på hvordan du bruker brukNaviger krok for programmatisk navigasjon. Forutsatt at du opprettet About.jsx funksjonell komponent, importer kroken fra React Router-pakken:

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

Legg deretter til en knapp som, når den klikkes, utløser navigasjonen til en spesifisert rute.

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

 </>
 );
}
exportdefault About;

Det er verdt å nevne at useNavigate-kroken og useNavigation-kroken, introdusert i React Router v6, tjener forskjellige formål til tross for deres nært beslektede navn.

UseNavigation-kroken lar deg få tilgang til detaljer knyttet til navigasjon, som den pågående navigasjonstilstanden og andre detaljer. Dette er nyttig når du ønsker å gjengi UI-elementer som å laste spinnere for å gi visuell tilbakemelding om pågående prosesser.

Her er et eksempel på hvordan du kan bruke 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 dette eksemplet er Send inn-knapp komponenten vil dynamisk oppdatere teksten basert på navigasjonstilstanden hentet fra useNavigation-kroken.

Selv om disse krokene har forskjellige roller, kan du fortsatt bruke dem sammen. UseNavigate-kroken for å starte navigasjonsprosessen og useNavigation-kroken for å hente sanntidsnavigasjonsdetaljer, som deretter veileder hva slags tilbakemeldingsgrensesnitt som skal gjengis i nettleseren.

Bruk av useRoutes Hook

Denne kroken lar deg definere rutebanene sammen med deres tilsvarende komponenter i et objekt. Deretter brukes kroken til å matche rutene og vise de relevante komponentene.

Her er et enkelt eksempel på hvordan du bruker 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 dette eksemplet er ruter objekt definerer tilordningen av URL-baner til komponenter. De App komponenten bruker deretter denne kroken for å matche gjeldende URL og gjengi den riktige komponenten basert på den matchede ruten.

Ved å bruke denne kroken får du detaljert kontroll over rutelogikken din og lar deg enkelt lage tilpasset rutehåndteringslogikk for applikasjonen din.

Håndtering av ruting i React-applikasjoner

Selv om React i seg selv ikke inkluderer en forhåndsbygd mekanisme for å håndtere ruteoppgaver, fyller React Router dette gapet. Den har ulike rutingkomponenter og verktøyfunksjoner som du enkelt kan bruke til å lage interaktive, brukervennlige applikasjoner.