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 wir die erforderlichen Abhängigkeiten installiert haben, können wir die Bibliothek in unsere Anwendung integrieren.

Um Routing-Funktionalität in unsere Anwendung zu integrieren, müssen wir die Wurzelkomponente mit `BrowserRouter` aus der Bibliothek `react-router-dom` umschließen. Dieser Schritt ist entscheidend, da er das Routingsystem initialisiert und es uns ermöglicht, die Navigation basierend auf der URL zu steuern.

## Beispiel
- Öffnen Sie die Datei `index.js` in Ihrem Projekt;
- Importieren Sie die Komponente `BrowserRouter` aus der Bibliothek `react-router-dom`:
```js
import { BrowserRouter } from "react-router-dom";
```
- Umschließen Sie die Komponente `App` mit der Komponente `BrowserRouter`, 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 Umschließen der Komponente `App` mit `BrowserRouter` stellen wir die Routing-Funktionalität in unserer Anwendung bereit.

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.

Aktivierung des Routings in Einer React-App

Beispiel

Awesome!

Aktivierung des Routings in Einer React-App

Beispiel