react嵌套路由如何渲染
React 嵌套路由的渲染方法
在 React 中实现嵌套路由通常使用 react-router-dom 库（v6 或更高版本）。嵌套路由允许在父路由组件内部动态渲染子路由组件，形成层级结构。
使用 Outlet 组件渲染嵌套内容
Outlet 是 react-router-dom v6 引入的核心组件，用于在父路由中标记子路由的渲染位置。
import { Routes, Route, Outlet } from 'react-router-dom';
function Parent() {
return (
<div>
<h2>Parent Layout</h2>
<Outlet /> {/* 子路由将在此处渲染 */}
</div>
);
}
function Child() {
return <h3>Child Component</h3>;
}
function App() {
return (
<Routes>
<Route path="/parent" element={<Parent />}>
<Route path="child" element={<Child />} />
</Route>
</Routes>
);
}路由路径的匹配规则
嵌套路由的路径会自动拼接父路由路径。例如：
- 父路由路径：
/parent - 子路由路径：
child - 完整路径：
/parent/child
可通过 index 属性指定默认子路由：
<Route index element={<DefaultChild />} />动态参数传递
嵌套路由支持动态参数：
<Route path="/users/:id" element={<UserLayout />}>
<Route path="posts" element={<UserPosts />} />
</Route>访问 /users/123/posts 时，:id 参数可通过 useParams() 获取。
布局组合模式
嵌套路由常用于实现多层布局：
function Dashboard() {
return (
<div>
<NavBar />
<Sidebar />
<Outlet /> {/* 内容区渲染子路由 */}
</div>
);
}
<Route path="/dashboard" element={<Dashboard />}>
<Route path="analytics" element={<Analytics />} />
<Route path="settings" element={<Settings />} />
</Route>编程式导航控制
在嵌套组件中使用 useNavigate 进行相对路径跳转：
const navigate = useNavigate();
// 跳转到 /parent/child
navigate('child'); 注意事项
- v6 版本不再支持
component和render属性，统一使用element - 所有路由定义必须包裹在
<Routes>组件内 - 使用
createBrowserRouter时需通过children属性定义嵌套 - 绝对路径需以
/开头，否则会相对父路径拼接
