react动态路由、嵌套路由、路由传参方式

React 路由一般使用目前最主流的 React Routerv6/v7下面我会从动态路由、嵌套路由、路由传参三个方面详细讲解并配上完整代码。一、React Router 基础安装npm install react-router-dom项目结构src ├── App.jsx ├── main.jsx ├── router │ └── index.jsx ├── pages │ ├── Home.jsx │ ├── User.jsx │ ├── Detail.jsx │ ├── Layout.jsx │ └── NotFound.jsx配置路由// router/index.jsx import { createBrowserRouter } from react-router-dom; import Home from ../pages/Home; import User from ../pages/User; const router createBrowserRouter([ { path: /, element: Home / }, { path: /user, element: User / } ]) export default router;main.jsximport ReactDOM from react-dom/client; import { RouterProvider } from react-router-dom; import router from ./router; ReactDOM.createRoot(document.getElementById(root)).render( RouterProvider router{router} / );二、动态路由动态路由就是/user/1 /user/2 /user/100实际上都是同一个页面。配置{ path: /user/:id, element: User / }这里:id就是动态参数。获取参数使用useParams()import { useParams } from react-router-dom; function User(){ const { id } useParams(); return ( 用户ID {id} / ) } export default User;访问localhost:3000/user/100输出用户ID100多个动态参数例如/user/100/article/88配置{ path:/user/:uid/article/:aid, element:Article/ }获取const { uid, aid } useParams(); console.log(uid); console.log(aid);输出100 88三、嵌套路由重点例如后台系统首页 系统管理 用户管理 菜单管理 角色管理 商品管理 商品列表 商品分类这种就是嵌套路由。Layout页面import { Outlet } from react-router-dom; function Layout(){ return( h1后台系统/h1 hr/ Outlet/ / ) } export default Layout;Outlet就是子路由出口。相当于Vue中的router-view配置{ path:/, element:Layout/, children:[ { index:true, element:Home/ }, { path:user, element:User/ }, { path:article, element:Article/ } ] }最终访问/ 显示 Layout Home访问/user显示Layout User访问/article显示Layout Article多级嵌套/ 后台 用户 用户详情配置{ path:/, element:Layout/, children:[ { path:user, element:User/, children:[ { path::id, element:Detail/ } ] } ] }User.jsximport { Outlet } from react-router-dom; function User(){ return( 用户页面 Outlet/ / ) }访问/user/100页面Layout 用户页面 详情100四、路由传参重点React Router 常见有4 种方式。第一种params路径参数URL/user/100配置{ path:/user/:id, element:User/ }跳转import { Link } from react-router-dom; Link to/user/100 查看 /Link或者navigate(/user/100);获取const { id } useParams();优点SEO友好 URL清晰 推荐第二种query查询参数URL/user?id100nameTom跳转navigate(/user?id100nameTom);获取import { useSearchParams } from react-router-dom; const [searchParams] useSearchParams(); console.log(searchParams.get(id)); console.log(searchParams.get(name));输出100 Tom也可以navigate({ pathname:/user, search:?id100nameTom });第三种state推荐页面跳转URL/user看不到参数。跳转navigate(/user,{ state:{ id:100, name:Tom } });获取import { useLocation } from react-router-dom; const location useLocation(); console.log(location.state);输出{ id:100, name:Tom }优点地址栏没有参数 可以传对象 方便缺点刷新丢失第四种URL 参数 SearchParams推荐例如/user/100?tabarticletype1配置path:/user/:id获取const { id } useParams(); const [search] useSearchParams(); console.log(id); console.log(search.get(tab)); console.log(search.get(type));输出100 article 1五、编程式导航使用import { useNavigate } from react-router-dom; const navigate useNavigate();跳转navigate(/home);带参数navigate(/user/100);Querynavigate(/user?id1);Statenavigate(/user,{ state:{ id:1 } });返回上一页navigate(-1);返回两页navigate(-2);前进navigate(1);六、Link与NavLinkLink to/home首页/LinkLink只负责跳转。NavLink可以根据当前路由自动添加激活状态适合导航菜单import { NavLink } from react-router-dom; NavLink to/home className{({ isActive }) (isActive ? active : )} 首页 /NavLink七、React Router v6/v7 推荐实践在实际项目如后台管理系统中推荐采用以下组合场景推荐方式示例查看详情params/user/100筛选、分页、搜索query/user?page1keywordreact页面间临时传对象statenavigate(/user, { state: { user } })多级页面布局children Outlet/system/user/list页面导航useNavigatenavigate(/home)菜单导航NavLink自动高亮当前菜单总结动态路由通过:param定义路径参数使用useParams()获取适合资源标识如用户 ID、文章 ID。嵌套路由使用children配置子路由在父组件中通过Outlet渲染子页面适合后台管理系统和多级布局。路由传参paramsURL 路径参数适合详情页。query查询字符串适合搜索、筛选、分页。state隐藏于地址栏适合页面间临时传递对象但刷新后会丢失。params query兼顾资源定位和筛选条件是复杂业务中常见的组合。