Grundlegendes zu React Router vFeatures, Setup und Best Practices

React Router v6: Eine vollständige Anleitung

React Router ist die beliebteste Bibliothek für das Routing in React-Anwendungen. Es ermöglicht Ihnen die Navigation zwischen verschiedenen Komponenten basierend auf der URL und bietet so ein Single-Page-Application-Erlebnis (SPA), bei dem der Inhalt aktualisiert wird, ohne dass die gesamte Seite neu geladen werden muss. React Router v6 ist die neueste Hauptversion und führt im Vergleich zu früheren Versionen eine Reihe von Verbesserungen, Vereinfachungen und neuen Funktionen ein.

---

Wichtige Funktionen und Änderungen in React Router v6

1. Vereinfachte API

   • React Router v6 führt eine einfachere und intuitivere API zum Definieren von Routen und Navigation ein, wodurch viele in Version 5 vorhandene Problemumgehungen überflüssig werden.

2. Routenelement (Element)

   • In v6 verwenden Routen jetzt die Element-Requisite anstelle der Komponenten- oder Render-Requisite. Dadurch können Sie die Komponente direkt zum Rendern übergeben.
   • Alt (v5): Komponente={ComponentName}
   • Neu (v6): element={}

3. Routenabgleich

   • Routenabgleich ist jetzt intuitiver. In v6 sind die Routen genau aufeinander abgestimmt, d. h. die beste Übereinstimmung wird ausgewählt und es ist keine „Catch-All“-Route mehr für die Verarbeitung dynamischer Segmente erforderlich.
   • Der Die Komponente wird durch ersetzt und wird verwendet, um nur die erste Route zu rendern, die mit der URL übereinstimmt.

4. Verschachtelte Routen

   • React Router v6 erleichtert die Definition verschachtelter Routen. Anstatt Render oder Children zum Verschachteln zu verwenden, können Sie jetzt direkt verschachtelte Routen mithilfe des Elements prop.
   definieren

5. Nein Genaueres

   • In React Router v6 stimmen alle Routen standardmäßig genau überein, sodass es nicht erforderlich ist, die exakte Requisite zu verwenden, um eine genaue Übereinstimmung anzugeben.

6. React Router Hooks

   • React Router v6 hat die Hooks aktualisiert, um sie an seine neue Architektur anzupassen, einschließlich useNavigate, useParams, useLocation, useMatch und useNavigate.

---

So richten Sie React Router v6 ein

Um mit React Router v6 zu beginnen, befolgen Sie diese Schritte:

1. Installieren Sie React Router v6

Sie können React Router v6 mit npm oder Yarn installieren.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2. Routen und Komponenten definieren

Sehen wir uns ein Beispiel für die Einrichtung des grundlegenden Routings in React Router v6 an.

Schritt 1: Definieren Sie die Haupt-App-Komponente

npm install react-router-dom@6
# or
yarn add react-router-dom@6

• : Dies ersetzt den Befehl Komponente aus früheren Versionen. Dadurch wird sichergestellt, dass nur die erste passende Route gerendert wird.
• } />: Dies definiert eine Route für die Homepage und rendert die Home-Komponente.
• : Der Platzhalter * wird verwendet, um 404-Fehler oder nicht übereinstimmende Routen zu behandeln und die NotFound-Komponente darzustellen, wenn die URL mit keiner Route übereinstimmt.

Schritt 2: Einzelne Komponenten erstellen

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>Über.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

Dynamisches Routing mit React Router v6

Um dynamische Routen zu verarbeiten, z. B. eine Benutzerprofilseite, bei der die Benutzer-ID Teil der URL ist, stellt React Router v6 den Hook „useParams“ bereit.

Schritt 1: Definieren Sie eine dynamische Route

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

Erklärung:

• :userId ist ein dynamisches Segment im Routenpfad. Mit dem useParams-Hook können Sie auf den Wert von userId in der UserProfile-Komponente zugreifen.
• Wenn Sie zu /user/123 navigieren, rendert die UserProfile-Komponente die Benutzer-ID und zeigt sie als 123 an.

---

Verschachtelte Routen in React Router v6

Mit verschachtelten Routen können Sie komplexe Layouts erstellen, indem Sie Unterrouten innerhalb der übergeordneten Routen definieren.

Schritt 1: Übergeordnete und untergeordnete Routen definieren

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

Erklärung:

• Die Dashboard-Komponente enthält verschachtelte Routen für Übersicht und Einstellungen.
• Das /* in der übergeordneten Route stellt sicher, dass alle untergeordneten Routen unter /dashboard behandelt werden.

---

React Router v6 Hooks

React Router v6 führt mehrere Hooks für die Navigation und den Zugriff auf Routing-Informationen ein:

1. useNavigate: Navigieren Sie programmgesteuert zu verschiedenen Routen.
2. useParams: Auf dynamische URL-Parameter zugreifen.
3. useLocation: Informationen zum aktuellen Standort (URL) abrufen.
4. useMatch: Ordnet die aktuelle URL einer bestimmten Route zu.
5. useResolvedPath: Einen Pfad zu einer absoluten URL auflösen.

Beispiel: Navigate Hook verwenden

Der useNavigate-Hook ermöglicht die programmgesteuerte Navigation innerhalb Ihrer Anwendung.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

Best Practices für React Router v6

• Genaue Übereinstimmung standardmäßig: React Router v6 gleicht Routen standardmäßig genau ab, was die Handhabung der Routenanpassung erleichtert, ohne dass eine genaue Angabe erforderlich ist.
• Element-Requisite verwenden: Übergeben Sie JSX direkt an die Element-Requisite, anstatt die Komponenten-Requisite zu verwenden, was Ihren Code vereinfacht und den Bedarf an Renderfunktionen reduziert.
• Verschachteltes Routing: Verwenden Sie verschachtelte Routen, um komplexe Seitenlayouts mit untergeordneten Routen zu erstellen und so Ihren Code modular und wartbar zu halten.
• Behandeln Sie 404-Fehler mit Wildcard-Route: Verwenden Sie den Platzhalter *, um alle nicht übereinstimmenden Routen abzufangen und eine 404-Seite anzuzeigen oder Benutzer auf eine Standardroute umzuleiten.

---

Fazit

React Router v6 führt mehrere Verbesserungen gegenüber früheren Versionen ein, darunter eine einfachere API, bessere Routenanpassung und verbesserte Unterstützung für dynamische und verschachtelte Routen. Durch die Nutzung von Hooks wie useNavigate, useParams und useLocation können Sie leistungsstarke und flexible Routingsysteme in Ihren React-Anwendungen erstellen.

---

Das obige ist der detaillierte Inhalt vonGrundlegendes zu React Router vFeatures, Setup und Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!