React Router: Konzepte und praktischer Leitfaden (Teil 1)

Ultimativer Leitfaden für React Router: Konzepte und praktischer Leitfaden

Einführung

Routing ist ein wesentliches Merkmal jeder modernen Webanwendung. Es ermöglicht Benutzern die nahtlose Navigation zwischen verschiedenen Abschnitten oder Seiten und sorgt so für ein reibungsloses und interaktives Erlebnis. In React wird dies mithilfe von React Router erreicht, einer leistungsstarken Bibliothek, die für das Routing in Single Page Applications (SPAs) entwickelt wurde.

React Router vereinfacht den Prozess der Erstellung dynamischer und verschachtelter Routen, der Handhabung von URL-Parametern, der Implementierung geschützter Routen und vielem mehr. In diesem umfassenden Leitfaden werden wir alle Aspekte von React Router untersuchen, seine Konzepte Schritt für Schritt aufschlüsseln und sie anhand praktischer Beispiele umsetzen.

---

Was ist React Router?

React Router ist eine deklarative, komponentenbasierte Bibliothek zur Verwaltung des Routings in React-Anwendungen. Es verwendet einen modernen Ansatz, um URLs Komponenten zuzuordnen, sodass Entwickler problemlos skalierbare und dynamische SPAs erstellen können.

Hauptfunktionen des React Routers

1. Deklaratives Routing: Definieren Sie Routen als Komponenten, wodurch das Routing-System leicht zu verstehen und zu warten ist.
2. Dynamisches Routing: Behandeln Sie dynamische Parameter in URLs wie /user/:id, um flexible und wiederverwendbare Routen zu erstellen.
3. Verschachtelte Routen: Organisieren Sie Ihre Routen hierarchisch und ermöglichen Sie so Eltern-Kind-Beziehungen.
4. Geschützte Routen: Sichern Sie bestimmte Routen hinter der Authentifizierung oder Autorisierung.
5. Programmatische Navigation: Navigieren Sie programmgesteuert zwischen Seiten basierend auf Benutzeraktionen.
6. Unterstützung für den Browserverlauf: Synchronisierung mit der Navigation des Browsers, einschließlich Vorwärts-, Rückwärts- und Aktualisierungsaktionen.

---

React Router installieren

Bevor wir beginnen, richten wir React Router in Ihrem Projekt ein. Installieren Sie die Bibliothek mit npm oder Yarn:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Nach der Installation können Sie React Router in Ihre Anwendung integrieren.

---

Kernkonzepte von React Router

React Router dreht sich um einige Kernkonzepte, die die Grundlage seines Routing-Systems bilden. Lassen Sie uns sie Schritt für Schritt aufschlüsseln.

---

1. BrowserRouter und Router-Komponenten

Auf der obersten Ebene Ihrer React-Anwendung müssen Sie alles in einen Router einbinden. React Router bietet mehrere Arten von Routern, der gebräuchlichste ist jedoch BrowserRouter, der die Verlaufs-API des Browsers zur Verwaltung der Navigation verwendet.

Wichtige Punkte zu BrowserRouter

• Es stellt den für das Routing erforderlichen Kontext bereit.
• Es hört auf Änderungen in der URL des Browsers und rendert Komponenten entsprechend neu.
• Andere Arten von Routern, wie HashRouter, verwenden einen Hash (#) in der URL für die Navigation, aber BrowserRouter wird häufiger in modernen Anwendungen verwendet.

So verwenden Sie BrowserRouter

Hier ist ein einfaches Beispiel für die Verwendung von BrowserRouter:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Erklärung:

• Wir importieren BrowserRouter aus React-Router-Dom.
• Die BrowserRouter-Komponente umschließt die gesamte Anwendung, um Routing-Funktionalität zu ermöglichen.

Hinweis: Sie können nur einen BrowserRouter im Stammverzeichnis Ihrer Anwendung haben.

---

2. Routen und Routenkomponenten

Nachdem Sie Ihre App mit BrowserRouter umhüllt haben, definieren Sie individuelle Routen mithilfe der Komponenten Routes und Route.

Was sind Routen und Routenkomponenten?

• Routen: Ein Container für alle Routen in Ihrer Anwendung.
• Route: Stellt eine einzelne Route dar und definiert:
  • Pfad: Der abzugleichende URL-Pfad.
  • Element: Die React-Komponente, die gerendert werden soll, wenn der Pfad übereinstimmt.

Grundlegendes Beispiel

import React from "react";
import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My App</h1>
                <p>Routing starts here!</p>
            </div>
        </BrowserRouter>
    );
}

export default App;

Erklärung:

1. path="/": Diese Route entspricht der Stamm-URL (/) und rendert die Home-Komponente.
2. path="/about": Entspricht /about und rendert die About-Komponente.
3. Wenn sich die URL ändert (z. B. /about), rendert React Router automatisch die entsprechende Komponente.

---

3. Link- und NavLink-Komponenten

In einer React-Anwendung kann die Verwendung herkömmlicher Tags für die Navigation bewirken, dass der Browser die Seite neu lädt. React Router bietet die Komponenten Link und NavLink für eine nahtlose Navigation ohne Seitenaktualisierung.

Die Link-Komponente

Mit der Link-Komponente können Sie zwischen Routen navigieren, indem Sie die URL aktualisieren, ohne die Seite neu laden zu müssen.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Erklärung:

• Link ersetzt das herkömmliche Tags.
• Verwenden Sie die to-Requisite, um den Zielpfad anzugeben.

Die NavLink-Komponente

Die NavLink-Komponente ähnelt Link, ermöglicht Ihnen jedoch, den Link basierend darauf zu gestalten, ob er aktiv ist.

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Hauptunterschied:

• Die NavLink-Komponente fügt eine activeClassName (oder isActive)-Requisite hinzu, um aktive Links zu formatieren.

---

Alles zusammenfügen

Lassen Sie uns diese Konzepte in einer kleinen Beispielanwendung kombinieren:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Ausgabe:

• Navigieren Sie zu /, um die Startseite anzuzeigen.
• Navigieren Sie zu /about, um die About-Seite anzuzeigen.
• Die Seite wird dynamisch aktualisiert, ohne dass ein Neuladen erforderlich ist.

---

Nächste Schritte

In diesem Teil haben wir die Grundlagen behandelt:

1. Was React Router ist und wie es funktioniert.
2. BrowserRouter einrichten.
3. Routen mit Routen und Route definieren.
4. Navigation mit Link und NavLink hinzufügen.

Im nächsten Artikel werden wir Folgendes untersuchen:

• Verschachteltes Routing
• Dynamische Routen
• Verwaltung von URL-Parametern

Bleiben Sie gespannt auf die nächste Folge dieser Serie Ultimate Guide to React Router!

Das obige ist der detaillierte Inhalt vonReact Router: Konzepte und praktischer Leitfaden (Teil 1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!