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 dient als Container für alle Routendefinitionen, während die Route-Komponente eine spezifische Routenkonfiguration 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 gerendert wird, wenn ein Benutzer zu diesem bestimmten 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 des return-Statements 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>
    </>
  );
};

Code-Erklärung:

• 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 beim Übereinstimmen des URL-Pfads / die Komponente <HomePage /> gerendert wird;
• Zeile 6: <Route>: Definiert eine weitere Route. Wenn der URL-Pfad /about übereinstimmt, wird die Komponente <AboutPage /> gerendert;
• Zeile 7: <Route>: Definiert eine weitere Route. Wenn der URL-Pfad /contacts übereinstimmt, wird die Komponente <ContactsPage /> gerendert.