React-router-v6 嵌套路由只渲染主路由

Posted 2023-02-22

【中文标题】React-router-v6 嵌套路由只渲染主路由

【英文标题】：React-router-v6 nested route only renders main route

【发布时间】：2021-12-28 22:10:43

【问题描述】：

我正在尝试将嵌套路由器用于待办事项列表。我有类别，我想按 id 导航到类别。我尝试的是：

<Routes>
   <Route path="/todolist" element=<TodoCategories />>
   <Route path=":id" element=<TodoList /> />
</Route>

我也试过这个；

<Routes>
   <Route path="/todolist/*" element=<TodoCategories />>
     <Route path=":id" element=<TodoList /> />
   </Route>
 </Routes>

Url 在浏览器中发生变化，例如 ;

http://localhost:3000/todolist/development

但是 TodoList 元素没有呈现。只有 TodoCategories 元素正在渲染。我尝试了一些解决方案，但没有奏效。感谢您的帮助。

【问题讨论】：

您是要在“/todolist/development”上渲染一些东西还是要渲染TodoList 组件？它与 URL 位于不同的路径上。

如果我在 url 中有参数，我会尝试渲染 TodoList 组件

对不起，我听不懂。路径是真实的。如果我尝试像 />

这样的路由路径，它会起作用

【参考方案1】：

您在路径 "/todolist/development" 上，但这与路径中的任一路径都不匹配，"/todolist" 或 "/:id"。

如果你想在"/todolist/development"上匹配和渲染，第二个路径应该是"/todolist/:id"。

<Routes>
  <Route path="/todolist" element=<TodoCategories />>
  <Route path="/todolist/:id" element=<TodoList /> />
</Route>