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

【问题标题】：React-router-v6 nested route only renders main routeReact-router-v6 嵌套路由只渲染主路由
【发布时间】：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 元素正在渲染。我尝试了一些解决方案，但没有奏效。感谢您的帮助。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：