React 中的动态路由

大家好，今天我将讨论 React JS 中的动态路由。我将使用 react-router-dom 库，因为它易于使用且灵活，可用于客户端和服务器端路由

让我们开始吧…

设置路由部分 -

index.js

 从 'react-router-dom' 导入 { BrowserRouter as Router }  
 .  
 .  
 <Router>  
 <App />  
 </Router>  
 .  
 .

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

创建路线 -

应用程序.js

 从“反应”导入反应；  
 从'react-router-dom'导入{路由，路由，链接}；  
 从'./UserDetails'导入UserDetails；  
 导入'./App.css'； 函数应用程序（）{  
 常量用户 = [1,2,3,4,5,6,7,8,9,10];  
 返回 （  
 <div className="">  
 <div className="mx-20 flex gap-5 my-24">  
 {  
 users.map((用户) => {  
 返回 （  
 <Link to={`users/${user}`}>用户{用户}</Link>  
 )  
 })  
 }  
 </div>  
 <Routes>  
 <Route path="users/:userId" element={<UserDetails /> } />  
 </Routes> </div>  
 );  
 } 导出默认应用程序；

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

创建动态组件 -

用户详细信息.js

 从“反应”导入反应  
 从 'react-router-dom' 导入 {useParams}； 功能用户详细信息（）{  
 常量 {userId} = useParams();  
 返回 （  
 <div>  
 <h1 className="text-indigo-600 m-12">用户 {userId}</h1>  
 </div>  
 )  
 } 导出默认用户详细信息