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中文网其他相关文章！