React 中的動態路由

React 中的動態路由可讓您基於動態資料或參數建立路由，從而在應用程式中實現更靈活、更強大的導航。這對於需要根據使用者輸入或其他動態因素呈現不同元件的應用程式特別有用。

使用 React Router 設定動態路由
您通常會使用react-router-dom程式庫在React中實作動態路由。這是逐步指南：

安裝React Router：首先，如果你還沒安裝react-router-dom：
npm install 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 (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

存取路由參數：使用 useParams 掛鉤來存取元件內的動態參數。
JavaScript

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

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

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

範例：動態使用者設定檔
讓我們建立一個簡單的範例，根據 URL 中的使用者 ID 導航到不同的使用者設定檔。

主頁元件：此元件將包含指向不同使用者設定檔的連結。
JavaScript

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

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

UserProfile 元件：此元件將顯示 URL 中的使用者 ID。
JavaScript

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

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

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

應用程式元件：此元件設定路由器並定義路由。
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 (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

以上是React 中的動態路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！