Summary  
This chapter explains how to enable client-side routing in a React application by wrapping the root component with the BrowserRouter component from react-router-dom.

General domain of usage  
Single-page web applications

Nachdem die erforderlichen Abhängigkeiten installiert wurden, kann die Bibliothek in die Anwendung integriert werden.

Um Routing-Funktionalität in die Anwendung zu integrieren, muss die Wurzelkomponente mit `BrowserRouter` aus der Bibliothek `react-router-dom` umschlossen werden. Dieser Schritt ist entscheidend, da dadurch das Routingsystem initialisiert wird und die Navigation basierend auf der URL verwaltet werden kann.

## Beispiel
- Die Datei `index.js` im Projekt öffnen;
- Die Komponente `BrowserRouter` aus der Bibliothek `react-router-dom` importieren:
```js
import { BrowserRouter } from "react-router-dom";
```
- Die Komponente `App` mit der Komponente `BrowserRouter` umschließen, wie unten gezeigt (Zeile 9-11):
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
```
Durch das Umhüllen der Komponente `App` mit `BrowserRouter` wird die Routing-Funktionalität in der Anwendung verfügbar gemacht.

Lernen Sie, die Navigation in React-Anwendungen mit React Router zu verwalten. Verstehen Sie den Aufbau von URLs und die Rolle des Routings in Webanwendungen. Richten Sie React Router ein, um Mehrseitenanwendungen mit dynamischen Inhalten basierend auf URL-Pfaden zu erstellen. Arbeiten Sie mit erweiterten Funktionen wie Query-Strings und URL-Parametern, um den Anwendungszustand und die Benutzernavigation zu steuern.

Erlernen der theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verständnis der Bedeutung von Routing in Webanwendungen und der Notwendigkeit der React-Router-Bibliothek.

Erfahren Sie, wie eine vollständige React-Anwendung von Grund auf erstellt wird, mit der Möglichkeit, Inhalte anzuzeigen, die sich anhand der URL mithilfe der React-Router-Funktionalität anpassen.

Erkunden Sie die Verwendung von Query-Strings zur gemeinsamen Nutzung und Verwaltung des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Query-Parametern und nutzen Sie React Router für Navigation und Effekte basierend auf URL-Änderungen.

Aktivierung des Routings in einer React-App

Beispiel

Awesome!

Aktivierung des Routings in einer React-App

Beispiel