Dynamisches Routing in React ermöglicht Ihnen die Erstellung von Routen basierend auf dynamischen Daten oder Parametern und ermöglicht so eine flexiblere und leistungsfähigere Navigation innerhalb Ihrer Anwendung. Dies ist besonders nützlich für Anwendungen, die verschiedene Komponenten basierend auf Benutzereingaben oder anderen dynamischen Faktoren rendern müssen.

Dynamisches Routing mit React Router einrichten
Normalerweise verwenden Sie die React-Router-Dom-Bibliothek, um dynamisches Routing in React zu implementieren. Hier ist eine Schritt-für-Schritt-Anleitung:

React Router installieren: Zuerst müssen Sie „react-router-dom“ installieren, falls Sie dies noch nicht getan haben:
npm install React-Router-Dom

Routen erstellen: Definieren Sie Ihre Routen mithilfe der Komponente. Verwenden Sie dynamische Segmente im Pfad, um Parameter zu erfassen.
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        
    );
};

export default App;

Zugriff auf Routenparameter: Verwenden Sie den useParams-Hook, um auf dynamische Parameter innerhalb Ihrer Komponenten zuzugreifen.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        

            
User Profile
            
User ID: {id}
        
    );
};

export default UserProfile;

Beispiel: Dynamische Benutzerprofile
Lassen Sie uns ein einfaches Beispiel erstellen, in dem wir basierend auf der Benutzer-ID in der URL zu verschiedenen Benutzerprofilen navigieren.

Home-Komponente: Diese Komponente enthält Links zu verschiedenen Benutzerprofilen.
JavaScript

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    return (
        

            
Home
            
User 1
                
User 2
                
User 3
            
    );
};

export default Home;

UserProfile-Komponente: Diese Komponente zeigt die Benutzer-ID aus der URL an.
JavaScript

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
    const { id } = useParams();

    return (
        

            
User Profile
            
User ID: {id}
        
    );
};

export default UserProfile;

App-Komponente: Diese Komponente richtet den Router ein und definiert die Routen.
JavaScript

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';

const App = () => {
    return (
        
    );
};

export default App;