Aktivierung des Routings in einer React-App

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:

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

• Die Komponente App mit der Komponente BrowserRouter umschließen, 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>
);

Durch das Umhüllen der Komponente App mit BrowserRouter wird die Routing-Funktionalität in der Anwendung verfügbar gemacht.