Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Definieren von Routen für die Navigation | Implementierung von React Router in Einer React-App
React Router Grundlagen

bookDefinieren von Routen für die Navigation

Nachdem wir unsere App mit BrowserRouter umschlossen haben, um Routing zu ermöglichen, besteht der nächste Schritt darin, die Routen (Pfade) festzulegen, die unsere App enthalten soll. Diese Routen bestimmen die Gesamtstruktur der App und steuern, welcher Inhalt basierend auf der URL angezeigt wird.

React Router stellt zwei wesentliche Komponenten zur Definition von Routen bereit: Routes und Route. Die Routes-Komponente fungiert als Container für alle Routendefinitionen, während die Route-Komponente eine spezifische Routen-Konfiguration darstellt.

Hier ist die Syntax zur Definition von Routen:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

In dieser Struktur:

  • <path_value>: Gibt die URL-Konfiguration für die Route an;
  • <component_to_render>: Bestimmt die Komponente, die angezeigt wird, wenn ein Benutzer zu diesem spezifischen Pfad navigiert.

Beispiel

Wenden wir dieses Konzept auf unser Projekt an. Öffne die Datei App.jsx und importiere die Komponenten Routes und Route aus der Bibliothek react-router-dom:

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

Definiere innerhalb der return-Anweisung der App-Komponente die Routen für unsere App:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Erläuterung des Codes:

  • Zeile 4, 8: <Routes>: Diese Komponente dient als Container zur Definition von Routen in der Anwendung und fungiert als übergeordnete Komponente für einzelne Routendefinitionen;
  • Zeile 5: <Route>: Stellt eine Routendefinition dar. Sie legt fest, dass bei Übereinstimmung des URL-Pfads mit / die Komponente <HomePage /> gerendert werden soll;
  • Zeile 6: <Route>: Definiert eine weitere Route. Wenn der URL-Pfad mit /about übereinstimmt, wird die Komponente <AboutPage /> angezeigt;
  • Zeile 7: <Route>: Definiert eine weitere Route. Wenn der URL-Pfad mit /contacts übereinstimmt, wird die Komponente <ContactsPage /> angezeigt.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 4.17

bookDefinieren von Routen für die Navigation

Swipe um das Menü anzuzeigen

Nachdem wir unsere App mit BrowserRouter umschlossen haben, um Routing zu ermöglichen, besteht der nächste Schritt darin, die Routen (Pfade) festzulegen, die unsere App enthalten soll. Diese Routen bestimmen die Gesamtstruktur der App und steuern, welcher Inhalt basierend auf der URL angezeigt wird.

React Router stellt zwei wesentliche Komponenten zur Definition von Routen bereit: Routes und Route. Die Routes-Komponente fungiert als Container für alle Routendefinitionen, während die Route-Komponente eine spezifische Routen-Konfiguration darstellt.

Hier ist die Syntax zur Definition von Routen:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

In dieser Struktur:

  • <path_value>: Gibt die URL-Konfiguration für die Route an;
  • <component_to_render>: Bestimmt die Komponente, die angezeigt wird, wenn ein Benutzer zu diesem spezifischen Pfad navigiert.

Beispiel

Wenden wir dieses Konzept auf unser Projekt an. Öffne die Datei App.jsx und importiere die Komponenten Routes und Route aus der Bibliothek react-router-dom:

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

Definiere innerhalb der return-Anweisung der App-Komponente die Routen für unsere App:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Erläuterung des Codes:

  • Zeile 4, 8: <Routes>: Diese Komponente dient als Container zur Definition von Routen in der Anwendung und fungiert als übergeordnete Komponente für einzelne Routendefinitionen;
  • Zeile 5: <Route>: Stellt eine Routendefinition dar. Sie legt fest, dass bei Übereinstimmung des URL-Pfads mit / die Komponente <HomePage /> gerendert werden soll;
  • Zeile 6: <Route>: Definiert eine weitere Route. Wenn der URL-Pfad mit /about übereinstimmt, wird die Komponente <AboutPage /> angezeigt;
  • Zeile 7: <Route>: Definiert eine weitere Route. Wenn der URL-Pfad mit /contacts übereinstimmt, wird die Komponente <ContactsPage /> angezeigt.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4
some-alt