设置路由部分 -

index.js\

import { BrowserRouter as Router } from 'react-router-dom'
.
.
 <Router>
      <App />
 </Router>
.
.

在您的 index.js 文件中，导入 Router 组件并将 App 组件包装在 Router 组件中。

创建路线 -

应用程序.js\

import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import UserDetails from './UserDetails';
import './App.css';

function App() {
  const users = [1,2,3,4,5,6,7,8,9,10];
  return (
    <div className="">
      <div className="mx-20 flex gap-5 my-24">
        {
          users.map((user) => {
            return (
              <Link to={`users/${user}`}>User {user}</Link>
            )
          })
        }
      </div>
      <Routes>
        <Route path="users/:userId" element={<UserDetails />} />
      </Routes>

    </div>
  );
}

export default App;

首先，我们从 react-router-dom 导入了 Routes、Route 和 Link。
Routes 用于将所有 Route 组件包装在其中。
Route 用于指定将在特定路径或 url 处呈现哪个组件，使用“path”属性提供路径，使用“元素”属性提供组件。
链接用于使用“to”属性将用户重定向到链接中提供的路径。我们使用模板字符串使链接动态化，并将用户数组的值映射到具有 1-10 数字的链接组件。
在 Route 组件的“path”属性中，我们使用了“users/:userId”，“:”冒号用于使路由动态化，可以使用冒号后的路由路径中提供的名称“userId”访问参数.

创建动态组件 -

用户详细信息.js\

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

function UserDetails() {
    const {userId} = useParams();
  return (
    <div>
        <h1 className="text-indigo-600 m-12">User {userId}</h1>
    </div>
  )
}

export default UserDetails

我们使用 useParam 挂钩从 url 访问参数值。
如您所见，我们使用完全相同的值“userId”来访问该值。
您可以检查输出，当您单击任何链接时，UserDetail 组件中的文本将被更改。

感谢您查看这篇文章

React 中的动态路由

设置路由部分 -

创建路线 -

创建动态组件 -