Hoe React Router V6 te gebruiken: een beginnershandleiding

React Router is de meest populaire bibliotheek die u kunt gebruiken om routering in React-toepassingen te implementeren. Het biedt een op componenten gebaseerde aanpak voor het afhandelen van een verscheidenheid aan routeringstaken, waaronder paginanavigatie, queryparameters en nog veel meer.

React Router V6 introduceert enkele belangrijke wijzigingen in het routeringsalgoritme, om valkuilen aan te pakken die aanwezig waren in de eerdere versie, en om een ​​verbeterde routeringsoplossing te bieden.

Aan de slag met routering met React Router V6

Starten, maak een React-applicatie. Alternatief, een React-project opzetten met Vite. Nadat je het project hebt gemaakt, ga je gang en installeer je het reageer-router-dom pakket.

npm install react-router-dom

Routes maken met React Router

Om routes te maken, begint u met het inpakken van de hele applicatie met een BrowserRouter bestanddeel. Update de code in uw index.jsx of hoofd.jsx bestand als volgt:

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

Door de App-component te combineren met de BrowserRouter-component zorgt u ervoor dat de gehele applicatie toegang krijgt tot de routeringscontext en functies die worden aangeboden door de React Router-bibliotheek.

Met behulp van de routecomponent

Nadat u de applicatie met de BrowserRouter-component hebt verpakt, kunt u uw routes definiëren.

De Routes onderdeel is een verbetering van de Schakelaar component die eerder werd gebruikt door React Router v5. Deze component ondersteunt relatieve routering, automatische routerangschikking en de mogelijkheid om met geneste routes te werken.

Normaal gesproken voegt u routes toe op het hoogste niveau van uw applicatie, vaak binnen de app-component. U kunt ze echter op elke andere locatie definiëren, afhankelijk van de structuur van uw project.

Open de App.jsx bestand en vervang de boilerplate React-code door het volgende:

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

Deze routeringsconfiguratie wijst specifieke URL-paden toe aan de overeenkomstige paginacomponenten (Dashboard en Over), om ervoor te zorgen dat de app het juiste onderdeel weergeeft wanneer een gebruiker een bepaalde website bezoekt URL.

Let op de element prop, binnen de Route-component, waarmee u een functionele component kunt doorgeven in plaats van alleen de naam van de component. Dit maakt het mogelijk om rekwisieten langs de routes en de bijbehorende componenten door te geven.

In de src map, maak een nieuwe Pagina's directory en voeg twee nieuwe bestanden toe: Dashboard.jsx En Over.jsx. Ga je gang en definieer functionele componenten binnen deze bestanden om de routes te testen.

CreateBrowserRouter gebruiken om routes te definiëren

Documentatie van React Router raadt aan om de maak BrowserRouter component om de routeringsconfiguratie voor React-webapplicaties te definiëren. Dit onderdeel is een lichtgewicht alternatief voor BrowserRouter die een reeks routes als argument gebruikt.

Door dit onderdeel te gebruiken, is het niet nodig om uw routes binnen het app-onderdeel te definiëren. In plaats daarvan kunt u al uw routeconfiguraties in het overzicht weergeven index.jsx of hoofd.jsx bestand.

Hier is een voorbeeld van hoe u dit onderdeel kunt gebruiken:

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

De routeringsconfiguratie maakt gebruik van de maak BrowserRouter En RouterProvider componenten om een ​​routeringssysteem voor een React-applicatie te creëren.

Het enige verschil met deze implementatie is echter dat, in plaats van de applicatie te verpakken met behulp van de BrowserRouter-component, deze de RouterProvider onderdeel om te slagen Router context voor alle componenten in de applicatie.

Routes voor pagina-niet-gevonden implementeren

De pad prop in de Route-component vergelijkt het opgegeven pad met de huidige URL om te bepalen of er een overeenkomst is voordat de vereiste component wordt weergegeven.

Om gevallen af ​​te handelen waarin geen routes overeenkomen, kunt u een specifieke route maken die wel wordt beheerd 404 pagina niet gevonden fouten. Door deze route op te nemen, kunnen gebruikers betekenisvolle reacties ontvangen in situaties waarin ze toegang hebben gekregen tot een niet-bestaande URL.

Om een ​​404-route te implementeren, voegt u deze route toe binnen de component Routes:

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

Maak vervolgens een aangepast NotFound.jsx onderdeel en tenslotte stijl de component met behulp van CSS-modules.

Het sterretje (*) is een jokerteken dat scenario's afhandelt waarin geen van de opgegeven routes overeenkomt met de huidige URL.

Programmatische navigatie met behulp van de useNavigate Hook

De gebruik Navigeren hook biedt een programmatische manier om navigatie in applicaties af te handelen. Deze hook is met name handig wanneer u navigatie wilt activeren als reactie op gebruikersinteracties of gebeurtenissen, zoals klikken op knoppen of het indienen van formulieren.

Laten we eens kijken hoe u de gebruik Navigeren haak voor programmatische navigatie. Ervan uitgaande dat u de Over.jsx functionele component, importeer de hook uit het React Router-pakket:

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

Voeg vervolgens een knop toe die, wanneer erop wordt geklikt, de navigatie naar een bepaalde route activeert.

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

 </>
 );
}
exportdefault About;

Het is de moeite waard te vermelden dat de useNavigate hook en useNavigation hook, geïntroduceerd in React Router v6, verschillende doeleinden dienen ondanks hun nauw verwante namen.

Met de useNavigation-hook hebt u toegang tot details met betrekking tot navigatie, zoals de lopende navigatiestatus en andere details. Dit is handig als u UI-elementen zoals laadspinners wilt weergeven om visuele feedback te geven over lopende processen.

Hier is een voorbeeld van hoe u de useNavigation-hook kunt gebruiken.

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

In dit voorbeeld is de Verzendknop component zal zijn tekst dynamisch bijwerken op basis van de navigatiestatus verkregen via de useNavigation-hook.

Ook al hebben deze haken verschillende rollen, je kunt ze toch samen gebruiken. De useNavigate-hook om het navigatieproces te initiëren en de useNavigation-hook om realtime navigatiegegevens op te halen, die vervolgens het soort feedback-UI begeleiden dat in de browser moet worden weergegeven.

Gebruik de useRoutes-hook

Met deze hook kunt u de routepaden definiëren naast de bijbehorende componenten binnen een object. Vervolgens wordt de haak gebruikt om de routes te matchen en de relevante onderdelen weer te geven.

Hier is een eenvoudig voorbeeld van het gebruik van de haak:

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;

In dit voorbeeld is de trajecten object definieert de toewijzing van URL-paden aan componenten. De App component gebruikt vervolgens deze hook om de huidige URL te matchen en de juiste component weer te geven op basis van de overeenkomende route.

Het gebruik van deze hook geeft u gedetailleerde controle over uw routeringslogica en stelt u in staat eenvoudig aangepaste logica voor routeafhandeling voor uw toepassing te creëren.

Routing verwerken in React-applicaties

Hoewel React zelf geen vooraf gebouwd mechanisme bevat voor het afhandelen van routeringstaken, vult React Router deze leemte op. Het biedt verschillende routeringscomponenten en hulpprogramma's waarmee u eenvoudig interactieve, gebruiksvriendelijke toepassingen kunt maken.