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.