react嵌套路由如何定义
嵌套路由的定义方法
在React中，嵌套路由通常通过react-router-dom库实现，利用<Routes>和<Route>组件配置层级关系。以下是具体实现方式：
安装依赖
确保项目已安装react-router-dom（v6及以上版本）：
npm install react-router-dom基本嵌套结构
在父路由组件中通过<Outlet />渲染子路由：
import { Routes, Route, Outlet } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/parent" element={<Parent />}>
<Route path="child" element={<Child />} />
</Route>
</Routes>
);
}
function Parent() {
return (
<div>
<h1>Parent Component</h1>
<Outlet /> {/* 子路由将在此处渲染 */}
</div>
);
}动态路径参数
嵌套路由支持动态参数传递：
<Route path="/users/:userId" element={<UserLayout />}>
<Route path="posts" element={<UserPosts />} />
<Route path="settings" element={<UserSettings />} />
</Route>默认子路由
通过index属性指定默认渲染的子组件：
<Route path="/dashboard" element={<Dashboard />}>
<Route index element={<DashboardHome />} />
<Route path="analytics" element={<DashboardAnalytics />} />
</Route>路由组合方式
可将嵌套路由拆分到不同文件，通过useRoutes钩子集中管理：
const routes = [
{
path: '/admin',
element: <AdminLayout />,
children: [
{ path: 'users', element: <UserList /> },
{ path: 'products', element: <ProductList /> }
]
}
];
function App() {
return useRoutes(routes);
}注意事项
- 嵌套路由的路径会自动拼接父路由路径（如
/parent/child） - 使用
<Link>组件导航时需填写完整路径 - 通过
useMatch或useParams可获取当前路由参数
