Startseite / Artikel / Grundlagen von React Router: Erklärung zu BrowserRouter, Routes, Route und Link

ReactReact RouterJavaScriptFrontendWeb Development

Grundlagen von React Router: Erklärung zu BrowserRouter, Routes, Route und Link

Erfahren Sie, was BrowserRouter, Routes, Route und Link in React Router jeweils bewirken, wie sie in einer Anwendung zusammenwirken und wie Sie die klassischen Vorstellungsgesprächsfragen dazu beantworten können.

930 Wörter

Die meisten React-Anwendungen benötigen bald mehrere Bildschirme, wie z. B. Startseite, Über uns, Produkte und Kontakt. React selbst kennt keine URLs, weshalb die Zuordnung von Adressen zu Bildschirmen einer Bibliothek überlassen wird, in der Regel React Router. Vier seiner Komponenten decken den größten Teil des täglichen Routings ab: <BrowserRouter>, <Routes>, <Route> und <Link>. Sobald man weiß, was jede Komponente tut und wie sie ineinander verschachtelt sind, kann man eine mehrseitige Single-Page-Anwendung aufbauen und dies in einem Vorstellungsgespräch erklären.

BrowserRouter verbindet React mit der URL

<BrowserRouter> ist der Router selbst. Er ermöglicht clientseitiges Routing über die History API des Browsers und hält die angezeigte Benutzeroberfläche in Einklang mit der Adressleiste, ohne vom Server ein neues Dokument anfordern zu müssen.

Verwenden Sie es, wenn Ihre Anwendung für ihre Bildschirme unterschiedliche URLs bereitstellen soll, aber dennoch wie eine einzige Seite funktioniert – zum Beispiel:

/
/about
/products
/contact

Die Einrichtung bedeutet, den Komponentenbaum zu umschließen; alles, was Routing benötigt, muss sich darin befinden:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Normalerweise platzieren Sie es einmal, am Wurzelpunkt. Eine praktische Folge: Da Pfade wie /about echte URLs sind, muss Ihr Server für alle davon denselben index.html liefern – andernfalls führt ein Neuladen von /about zu einem Serverfehler 404.

Routes bestimmt, was angezeigt wird

<Routes> ist der Container für Ihre Routendefinitionen. Bei jeder Änderung des Standorts vergleicht es die aktuelle URL mit seinen Kindern und zeigt die entsprechende an. Verwenden Sie es immer dann, wenn React Router – und nicht handgeschriebene Bedingungen – entscheiden soll, welcher Bildschirm angezeigt wird:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Hier kümmert sich ein <Routes>-Element um alle drei Pfade. Es wählt die beste Übereinstimmung statt die erste aus der Liste, sodass man sich selten um die Reihenfolge sorgen muss.

Routen verknüpfen einen Pfad mit einem Element

Jedes <Route>-Element verbindet einen URL-Pfad mit dem anzuzeigenden Komponenten, ähnlich wie eine Eintragung in einer Abfrage-Tabelle:

/about → About component
/products → Products component

Fügen Sie ein Element für jeden URL hinzu, der etwas Bestimmtes anzeigen soll. Die wichtigsten Eigenschaften sind path und element:

<Route
  path="/about"
  element={<About />}
/>

Mit dieser Definition führt ein Besuch dieser Adresse dazu, dass:

/about

React Router ausgibt:

<About />

Bemerken Sie, dass element ein bereits gerendertes Element (<About />) entgegennimmt, nicht eine Referenz auf eine Komponente, sodass Sie Eigenschaften direkt übergeben können. Mehrere Routen zusammen sehen so aus:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Falls kein Pfad übereinstimmt, wird in diesem Block nichts angezeigt; eine Allzweck-Route mit path="*" ist die übliche Methode, um ein „nicht gefunden“-Bildschirm anzuzeigen.

Link navigiert ohne Neuladen

<Link> versetzt den Benutzer zwischen Routen, während die App weiterhin geladen bleibt. Es wird ein gewöhnliches <a> im DOM angezeigt, doch der Klick wird abgefangen und React Router übernimmt die Navigation. Verwenden Sie es für interne Navigationen wie z. B. in einer Navigationsleiste:

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Durch Klicken auf About wird die URL aktualisiert, <Routes> wird neu ausgewertet, und der About-Bildschirm erscheint ohne Neuladen des Browsers – dadurch bleiben das gemeinsame Layout sowie der Zustand im Arbeitsspeicher erhalten. Für externe Seiten ist weiterhin ein einfaches <a> geeignet.

Zusammenfassung der vier Elemente

Eine minimale, vollständige Einrichtung (mit Home, About und Contact, die an anderer Stelle definiert sind):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Die Links sowie der <Routes>-Block sind Geschwisterelemente innerhalb von <BrowserRouter>: Die Navigation bleibt auf jeder Seite sichtbar, während nur der <Routes>-Bereich den Inhalt wechselt. Die Hierarchie kurz gesagt:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> befindet sich neben dieser Kette als Steuerelement, auf das die Benutzer klicken, um die URL zu ändern. Die Beispiele importieren von react-router-dom; neuere Hauptversionen stellen auch diese APIs aus dem react-router-Paket zur Verfügung, daher sollten Sie die Dokumentation für Ihre Version prüfen.

Interviewfragen

  • Was ist <BrowserRouter>? Der Router, der clientseitiges Routing ermöglicht und die Benutzeroberfläche mit der Browser-URL synchron hält.
  • Inwiefern unterscheiden sich <Routes> und <Route>? <Routes> ist der Container, der auf die URL abgestimmt wird; jede <Route> definiert einen Pfad sowie das zu rendernde Element.
  • Wie unterscheidet sich <Link> von <a>? <Link> navigiert auf der Client-Seite ohne vollständige Neuladung; ein einfaches <a> veranlasst den Browser, die URL erneut zu laden.
  • Warum sollte man in einer React Router-Anwendung <Link> bevorzugen? Es sorgt dafür, dass die Anwendung als Single-Page-Anwendung bleibt, und vermeidet unnötige Vollseitenneuladungen.
  • Kann <Route> ohne <BrowserRouter> funktionieren? Normalerweise nicht: Routing-Komponenten müssen innerhalb eines Router-Kontexts wie <BrowserRouter> rendern.

    • Hauptpunkte

    • <BrowserRouter> ermöglicht das Routing einmal an der Wurzel.
    • <Routes> verwaltet die Routen und rendernt den passenden Inhalt.
    • <Route> verknüpft eine URL mit einer Komponente.
    • <Link> wechselt zwischen Routen ohne Neuladen.

    Nestierte Routen, dynamische Segmente, geschützte Routen sowie Navigationshooks basieren alle auf diesemselben Modell. Wie React entscheidet, was neu rendern soll, wenn sich die Route ändert, erfahren Sie unter Building a mental model for React reconciliation, state and hooks.

    Zusätzliche Literatur

    Alle ArtikelBrief senden