O roteamento dinâmico no React permite que você crie rotas com base em dados ou parâmetros dinâmicos, permitindo uma navegação mais flexível e poderosa dentro do seu aplicativo. Isso é particularmente útil para aplicativos que precisam renderizar diferentes componentes com base na entrada do usuário ou em outros fatores dinâmicos.

Configurando roteamento dinâmico com React Router
Normalmente você usará a biblioteca react-router-dom para implementar o roteamento dinâmico no React. Aqui está um guia passo a passo:

Instale o React Router: Primeiro, você precisa instalar o react-router-dom se ainda não o fez:
npm instalar react-router-dom

Criar Rotas: Defina suas rotas usando o componente. Use segmentos dinâmicos no caminho para capturar parâmetros.
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;

Acessar parâmetros de rota: use o gancho useParams para acessar parâmetros dinâmicos em seus componentes.
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;

Exemplo: perfis de usuário dinâmicos
Vamos criar um exemplo simples onde navegamos para diferentes perfis de usuário com base no ID do usuário na URL.

Componente inicial: este componente terá links para diferentes perfis de usuário.
Javascript

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

const Home = () => {
    return (
        

            
Home
            
User 1
                
User 2
                
User 3
            
    );
};

export default Home;

Componente UserProfile: Este componente exibirá o ID do usuário do URL.
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;

Componente App: Este componente configura o roteador e define as rotas.
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;