React 中的动态路由允许您基于动态数据或参数创建路由，从而在应用程序中实现更灵活、更强大的导航。这对于需要根据用户输入或其他动态因素呈现不同组件的应用程序特别有用。

使用 React Router 设置动态路由
您通常会使用react-router-dom库在React中实现动态路由。这是分步指南：

安装React Router：首先，如果你还没有安装react-router-dom：
npm 安装react-router-dom

创建路线：使用组件定义您的路线。在路径中使用动态段来捕获参数。
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;

访问路由参数：使用 useParams 挂钩来访问组件内的动态参数。
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;

示例：动态用户配置文件
让我们创建一个简单的示例，根据 URL 中的用户 ID 导航到不同的用户配置文件。

主页组件：此组件将包含指向不同用户配置文件的链接。
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 组件：此组件将显示 URL 中的用户 ID。
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 组件：该组件设置路由器并定义路由。
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;