Sobald wir die notwendigen Abhängigkeiten installiert haben, können wir die Bibliothek in unsere Anwendung integrieren.

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

Beispiel

• Öffnen Sie die Datei index.js in Ihrem Projekt;
• Importieren Sie die BrowserRouter-Komponente aus der react-router-dom-Bibliothek:

import { BrowserRouter } from "react-router-dom";

• Umschließen Sie die App-Komponente mit der BrowserRouter-Komponente, wie unten gezeigt (Zeile 9-11):

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>
);

Indem wir die App-Komponente mit BrowserRouter umschließen, machen wir die Routing-Funktionalität in unserer Anwendung verfügbar.