React 中的动态路由

时间:2022-09-23
本文章向大家介绍React 中的动态路由,主要内容包括设置路由部分 -、创建路线 -、创建动态组件 -、感谢您查看这篇文章、使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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>  
 )  
 } 导出默认用户详细信息
  • 我们使用 useParam 挂钩从 url 访问参数值。
  • 如您所见,我们使用完全相同的值“userId”来访问该值。
  • 您可以检查输出,当您单击任何链接时,UserDetail 组件中的文本将被更改。

感谢您查看这篇文章

你可以联系我——
Instagram — https://www.instagram.com/supremacism__shubh/
领英——https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件 — [email protected]

^^您可以通过以下链接捐款帮助我谢谢 ^^
☕ → https://www.buymeacoffee.com/waaduheck

还要检查这些帖子
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/38742/07152310

原文地址:https://www.cnblogs.com/amboke/p/16721751.html