React路由器v6混淆
React路由器v6混淆
提问于 2022-05-18 21:28:05
在ReactRouter教程页面上，他们说
当路线有孩子时，它会做两件事：
- 它嵌套URL ("/“+”费用“和"/”+“发票”)
- 当子路由匹配时，它将嵌套共享布局的UI组件：
“它会筑巢”把我搞糊涂了那是什么意思？
回答 1
Stack Overflow用户
发布于 2022-05-18 23:17:21
请考虑以下路由示例：
<Routes>
<Route path="/" element={<Layout />}>
<Route path="invoices" element={<Invoices />} />
<Route path="expenses" element={<Expenses />} />
</Route>
</Routes> 它嵌套URL ("/“+”费用“和"/”+“发票”)
嵌套路由呈现相对于父布局路由的路径。
<Routes>
<Route path="/" element={<Layout />}> // "/"
<Route path="invoices" element={<Invoices />} /> // "/invoices"
<Route path="expenses" element={<Expenses />} /> // "/expenses"
</Route>
</Routes> 当子路由匹配时，它将嵌套共享布局的UI组件：
至少，Layout组件将为要呈现到的嵌套路由呈现一个Outlet组件。它还可以呈现其他常见的UI元素，如网格布局、列、页眉/内容/页脚等。
示例布局组件：
import { Outlet } from 'react-router-dom';
const Layout = () => (
<>
<Navbar />
<Sidebar />
<Outlet /> // <-- nested routes components render here
<Footer />
</>
);Layout组件保持挂载状态，只有匹配的路由组件在更新URL路径时才会更改。
有关更多细节，请参见：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72299053
复制相关文章
点击加载更多
相似问题
React路由器v6 onclick
从react路由器迁移到react路由器v6
与React路由器混淆
无法返回React路由器v6
React:使用React传递参数-路由器v6
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
