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;