Jetzt, da wir unsere App mit `BrowserRouter` umschlossen haben, um Routing zu ermöglichen, besteht der nächste Schritt darin, die Routen (Pfade) anzugeben, die unsere App enthalten wird. Diese Routen bestimmen die Gesamtstruktur der App und steuern, welche Inhalte basierend auf der URL angezeigt werden.

React Router bietet zwei wesentliche Komponenten zum Definieren von Routen: `Routes` und `Route`. Die `Routes`-Komponente fungiert als Container für alle Routendefinitionen, während die `Route`-Komponente eine spezifische Routenkonfiguration darstellt.

Hier ist die Syntax zum Definieren von Routen:
```js
<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 spezifischen Pfad navigiert.

## Beispiel
Wenden wir dieses Konzept auf unser Projekt an. Öffnen Sie die Datei `App.jsx` und importieren Sie die Komponenten `Routes` und `Route` aus der Bibliothek `react-router-dom`:
```js
import { Routes, Route } from "react-router-dom";
```
Definieren Sie innerhalb der `return`-Anweisung der `App`-Komponente die Routen für unsere App:
```js
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. Es gibt an, dass die Komponente `/` gerendert werden soll, wenn der URL-Pfad `<HomePage />` übereinstimmt;
- 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 `<ContactsPage />`-Komponente gerendert.


Tauchen Sie ein in die Welt des Routings innerhalb von React-Anwendungen und lernen Sie, wie React Router die Verwaltung von Navigation, URL-Zustand und dynamischem Komponenten-Rendering vereinfacht, alles als Reaktion auf die aktuelle URL.

Lernen Sie die theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verstehen Sie die Bedeutung des Routings in Webanwendungen und warum wir die React Router-Bibliothek benötigen.

Entdecken Sie, wie Sie eine komplette React-Anwendung von Grund auf erstellen können, mit der Fähigkeit, Inhalte anzuzeigen, die sich basierend auf der URL mit der React Router-Funktionalität anpassen.

Erkunden Sie die Verwendung von Abfragezeichenfolgen zum Teilen und Verwalten des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Abfrageparametern und nutzen Sie React Router für die Navigation und Effekte basierend auf URL-Änderungen.

React Router

Routen Definieren

Beispiel