So verwenden Sie React Router V6: Ein Leitfaden für Anfänger

React Router ist die beliebteste Bibliothek, die Sie zum Implementieren von Routing in React-Anwendungen verwenden können. Es bietet einen komponentenbasierten Ansatz zur Bearbeitung einer Vielzahl von Routing-Aufgaben, einschließlich Seitennavigation, Abfrageparametern und vielem mehr.

React Router V6 führt einige wesentliche Änderungen am Routing-Algorithmus ein, um Fallstricke zu beseitigen, die in der früheren Version vorhanden waren, und eine verbesserte Routing-Lösung bereitzustellen.

Erste Schritte mit dem Routing mit React Router V6

Um zu beginnen, Erstellen Sie eine React-Anwendung. Alternative, Richten Sie ein React-Projekt mit Vite ein. Nachdem Sie das Projekt erstellt haben, fahren Sie mit der Installation fort React-Router-Dom Paket.

npm install react-router-dom

Erstellen von Routen mit React Router

Um Routen zu erstellen, beginnen Sie damit, die gesamte Anwendung mit einem zu umschließen BrowserRouter

Komponente. Aktualisieren Sie den Code in Ihrem index.jsx oder main.jsx Datei wie folgt:

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

Durch das Umschließen der App-Komponente mit der BrowserRouter-Komponente wird sichergestellt, dass die gesamte Anwendung Zugriff auf den Routing-Kontext und die Funktionen erhält, die von der React Router-Bibliothek angeboten werden.

Verwenden der Routenkomponente

Sobald Sie die Anwendung mit der BrowserRouter-Komponente umschlossen haben, können Sie Ihre Routen definieren.

Der Routen Komponente ist eine Verbesserung der Schalten Komponente, die zuvor von React Router v5 verwendet wurde. Diese Komponente unterstützt relatives Routing, automatisches Routenranking und die Möglichkeit, mit verschachtelten Routen zu arbeiten.

Normalerweise fügen Sie Routen auf der höchsten Ebene Ihrer Anwendung hinzu, häufig innerhalb der App-Komponente. Abhängig von der Struktur Ihres Projekts können Sie sie jedoch auch an jeder anderen Stelle definieren.

Öffne das App.jsx Datei und ersetzen Sie den Boilerplate-React-Code durch Folgendes:

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

Diese Routing-Konfiguration ordnet bestimmte URL-Pfade den entsprechenden Seitenkomponenten (Dashboard) zu und About), um sicherzustellen, dass die App die entsprechende Komponente rendert, wenn ein Benutzer eine bestimmte besucht URL.

Beachten Sie die Element prop innerhalb der Route-Komponente, mit der Sie eine funktionale Komponente und nicht nur den Namen der Komponente übergeben können. Dadurch ist es möglich, Requisiten entlang der Routen und der zugehörigen Komponenten weiterzuleiten.

Im src Verzeichnis, erstellen Sie ein neues Seiten Verzeichnis und fügen Sie zwei neue Dateien hinzu: Dashboard.jsx Und Über.jsx. Definieren Sie in diesen Dateien Funktionskomponenten, um die Routen zu testen.

Verwenden von createBrowserRouter zum Definieren von Routen

Dokumentation des React Routers empfiehlt die Verwendung von createBrowserRouter Komponente zum Definieren der Routing-Konfiguration für React-Webanwendungen. Diese Komponente ist eine leichte Alternative zu BrowserRouter das ein Array von Routen als Argument verwendet.

Wenn Sie diese Komponente verwenden, müssen Sie Ihre Routen nicht innerhalb der App-Komponente definieren. Stattdessen können Sie alle Ihre Routenkonfigurationen innerhalb des skizzieren index.jsx oder main.jsx Datei.

Hier ist ein Beispiel dafür, wie Sie diese Komponente verwenden können:

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

Die Routing-Konfiguration verwendet die createBrowserRouter Und RouterProvider Komponenten, um ein Routing-System für eine React-Anwendung zu erstellen.

Der einzige Unterschied bei dieser Implementierung besteht jedoch darin, dass die Anwendung nicht mit der BrowserRouter-Komponente umschlossen wird, sondern die RouterProvider Komponente, um die zu übergeben Router Kontext zu allen Komponenten in der Anwendung.

Implementieren von Page-Not-Found-Routen

Der Weg prop in der Route-Komponente vergleicht den bereitgestellten Pfad mit der aktuellen URL, um festzustellen, ob eine Übereinstimmung vorliegt, bevor die erforderliche Komponente gerendert wird.

Um Fälle zu behandeln, in denen keine Routen übereinstimmen, können Sie eine bestimmte Route erstellen, die verwaltet wird 404-Fehler: Seite nicht gefunden. Durch die Einbeziehung dieser Route wird sichergestellt, dass Benutzer in Situationen, in denen sie auf eine nicht vorhandene URL zugegriffen haben, aussagekräftige Antworten erhalten können.

Um eine 404-Route zu implementieren, fügen Sie diese Route innerhalb der Routes-Komponente hinzu:

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

Erstellen Sie dann eine benutzerdefinierte NotFound.jsx Komponente und schließlich Gestalten Sie die Komponente mithilfe von CSS-Modulen.

Das Sternchen (*) ist ein Platzhalterzeichen, das Szenarios behandelt, in denen keine der angegebenen Routen mit der aktuellen URL übereinstimmt.

Programmatische Navigation mit dem useNavigate-Hook

Der verwendenNavigieren Hook bietet eine programmgesteuerte Möglichkeit, die Navigation in Anwendungen zu verwalten. Dieser Hook ist besonders nützlich, wenn Sie die Navigation als Reaktion auf Benutzerinteraktionen oder -ereignisse auslösen möchten, beispielsweise auf Schaltflächenklicks oder Formularübermittlungen.

Werfen wir einen Blick auf die Verwendung des verwendenNavigieren Hook für programmatische Navigation. Vorausgesetzt, Sie haben das erstellt Über.jsx Funktionskomponente, importieren Sie den Hook aus dem React Router-Paket:

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

Fügen Sie dann eine Schaltfläche hinzu, die beim Klicken die Navigation zu einer bestimmten Route auslöst.

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

 </>
 );
}
exportdefault About;

Es ist erwähnenswert, dass der in React Router v6 eingeführte useNavigate-Hook und der useNavigation-Hook trotz ihrer eng verwandten Namen unterschiedliche Zwecke erfüllen.

Der useNavigation-Hook ermöglicht Ihnen den Zugriff auf navigationsbezogene Details, wie den aktuellen Navigationsstatus und andere Besonderheiten. Dies ist nützlich, wenn Sie UI-Elemente wie Lade-Spinner rendern möchten, um visuelles Feedback zu laufenden Prozessen zu geben.

Hier ist ein Beispiel dafür, wie Sie den useNavigation-Hook verwenden können.

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 diesem Beispiel ist die SubmitButton Die Komponente aktualisiert ihren Text dynamisch basierend auf dem Navigationsstatus, der vom useNavigation-Hook erhalten wird.

Auch wenn diese Haken unterschiedliche Rollen haben, können Sie sie dennoch zusammen verwenden. Der useNavigate-Hook zum Initiieren des Navigationsprozesses und der useNavigation-Hook zum Abrufen von Navigationsdetails in Echtzeit, die dann die Art der Feedback-Benutzeroberfläche steuern, die im Browser gerendert werden soll.

Verwenden des useRoutes-Hooks

Mit diesem Hook können Sie die Routenpfade entlang ihrer entsprechenden Komponenten innerhalb eines Objekts definieren. Anschließend werden mit dem Hook die Routen abgeglichen und die relevanten Komponenten angezeigt.

Hier ist ein einfaches Beispiel für die Verwendung des Hooks:

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 diesem Beispiel ist die Routen Das Objekt definiert die Zuordnung von URL-Pfaden zu Komponenten. Der App Die Komponente verwendet dann diesen Hook, um die aktuelle URL abzugleichen und die entsprechende Komponente basierend auf der übereinstimmenden Route zu rendern.

Durch die Verwendung dieses Hooks erhalten Sie eine detaillierte Kontrolle über Ihre Routing-Logik und können auf einfache Weise eine benutzerdefinierte Routenverarbeitungslogik für Ihre Anwendung erstellen.

Umgang mit Routing in React-Anwendungen

Obwohl React selbst keinen vorgefertigten Mechanismus zur Abwicklung von Routing-Aufgaben enthält, füllt React Router diese Lücke. Es bietet verschiedene Routing-Komponenten und Hilfsfunktionen, mit denen Sie problemlos interaktive, benutzerfreundliche Anwendungen erstellen können.