v6嵌套路由不能与父路由中的元素一起工作
v6嵌套路由不能与父路由中的元素一起工作
提问于 2022-02-02 23:37:40
React路由器嵌套路由示例文档提供的V6不起作用。我和"react-router-dom": "^6.2.1"试过了，孩子们的路线不起作用。当我尝试访问/parent或/parent/child时，它返回根元素。
<BrowserRouter>
<Routes>
<Route path="/" element={<div>Root</div>}>
<Route path="parent" element={<div>Parent</div>}>
<Route path="child" element={<div>Child</div>} />
</Route>
</Route>
</Routes>
</BrowserRouter>如果我从根路由：/parent中移除element，那么element路由就能正常工作。但是在这个例子中，我得到了下面的警告，页面'/'是空的，'/parent/child'仍然不能工作。
Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.我真的很感激任何帮助，以更好地理解这种行为。
回答 1
Stack Overflow用户
发布于 2022-02-02 23:50:35
对于嵌套的Route组件，父布局组件需要为它们呈现一个要呈现到的Outlet。
示例：
<BrowserRouter>
<Routes>
<Route
path="/"
element={(
<div>
Root
<Outlet /> // <-- nested routes rendered here
</div>
)}
>
<Route
path="parent"
element={(
<div>
Parent
<Outlet /> // <-- nested routes rendered here
</div>
)}
>
<Route path="child" element={<div>Child</div>} />
</Route>
</Route>
</Routes>
</BrowserRouter>您需要在链接的文档中深入阅读，才能得到解释：
请注意随URL更改的内部组件(
<SentInvoices>和<Invoice>)。父路由(<Invoices>)负责确保使用<Outlet>呈现匹配的子路由。以下是完整的示例： 从“反应性-路由器-多姆”导入{路由、路由、出口}；函数App() {返回(<路由path=“发票”element={}> <路由path=": invoiceId“element={} /> ”；}函数发票(){返回(发票)；}函数发票(){ let {invoiceId}=useParams；返回发票{invoiceId}；}函数SentInvoices() {返回发送的发票；}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70964273
复制相关文章
相似问题
腾讯云开发者
