DEV Community
·
嵌套路由
💡
原文约800字/词，阅读约需3分钟。
📝
内容提要
嵌套路由是在根路由中设置子路由的方式，允许在一个页面中显示多个子页面，从而保持代码和路由结构的整洁。例如，可以通过动态路径如 /dashboard/settings 显示设置或个人资料页面。
🎯
关键要点
- 嵌套路由是在根路由中设置子路由的方式，允许在一个页面中显示多个子页面。
- 使用嵌套路由可以保持代码和路由结构的整洁。
- 可以通过动态路径如 /dashboard/settings 显示设置或个人资料页面。
- 使用 <Route> ... </Route> 来创建子页面，而不是自闭合标签。
- 在 App.jsx 中添加动态路由，使用 <Route element={<Layout />}> 来渲染子组件。
- Layout 组件中渲染 Header 和 Outlet 组件。
- 可以在父路由外部使用 <Route /> 来显示独立的组件。
- 创建新的嵌套路由时，可以在 App.jsx 中添加新的路径。
- HostLayout 组件中包含导航链接，并使用 Outlet 渲染子路由。
- Dashboard 组件中也可以创建新的 Outlet，从而实现多层嵌套路由。
➡️
