react如何实现路由嵌套
使用 React Router 实现嵌套路由
React Router v6 提供了简洁的嵌套路由实现方式，主要通过 <Outlet> 组件和子路由配置完成。
安装 React Router：
npm install react-router-dom基础嵌套路由配置
在根组件中定义父路由和子路由结构：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/parent" element={<Parent />}>
<Route path="child" element={<Child />} />
</Route>
</Routes>
</BrowserRouter>
);
}在父组件中使用 Outlet
父组件需要包含 <Outlet> 来渲染子路由内容：
import { Outlet } from 'react-router-dom';
function Parent() {
return (
<div>
<h2>Parent Component</h2>
<Outlet />
</div>
);
}多级嵌套路由
可以无限层级嵌套路由：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />}>
<Route path="profile" element={<Profile />} />
</Route>
</Route>索引路由
为父路由设置默认显示的子组件：
<Route path="/user" element={<UserLayout />}>
<Route index element={<UserHome />} />
<Route path="profile" element={<UserProfile />} />
</Route>动态参数传递
嵌套路由支持动态参数：
<Route path="/products" element={<Products />}>
<Route path=":productId" element={<ProductDetail />} />
</Route>相对路径与绝对路径
子路由默认使用相对路径：
- 父路由
/parent - 子路由
child会组合成/parent/child
使用绝对路径需以 / 开头：
<Route path="/child" element={<Child />} />路由组合模式
可以将路由配置抽离为独立对象：
const routes = [
{
path: '/',
element: <Layout />,
children: [
{ index: true, element: <Home /> },
{ path: 'about', element: <About /> }
]
}
];
function App() {
return (
<BrowserRouter>
<Routes>
{routes.map((route) => (
<Route key={route.path} {...route} />
))}
</Routes>
</BrowserRouter>
);
}注意事项
- 确保父路由组件包含
<Outlet>组件 - 使用
index属性指定默认子路由 - 嵌套路由的路径默认是相对于父路由的
- React Router v6 不再支持
component属性，统一使用element
这种结构化的路由配置方式使得代码更易维护，尤其适合中大型应用的复杂路由需求。
