React Router v6嵌套路由仅渲染主路由 子路由TodoList不渲染如何解决

核心原因 #

React Router v6 的嵌套路由规则要求，父路由对应的组件必须内置 <Outlet /> 组件作为子路由的渲染出口，未在 TodoCategories 组件中添加该组件，就会导致子路由匹配成功后子组件无法渲染。

修复步骤 #

1. 调整路由配置 #

你提供的第一种配置就是符合要求的正确写法，不需要在父路由路径后加 /*，该通配符仅用于组件内部嵌套二级 <Routes> 的场景：

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

2. 修改父组件 TodoCategories #

从 react-router-dom 导入 Outlet 组件，插入到你希望展示 TodoList 的位置即可：

import { Outlet } from 'react-router-dom'

function TodoCategories() {
  return (
    <div>
      {/* 原有分类列表、导航等逻辑代码保持不变 */}
      <div className="category-nav">
        {/* 你的分类跳转Link逻辑 */}
      </div>
      {/* 子路由匹配成功后，TodoList组件会渲染在此处 */}
      <Outlet />
    </div>
  )
}

可选方案：平级路由（不需要嵌套展示时使用） #

如果你希望点击分类后完全替换分类列表页面，不需要保留 TodoCategories 的内容，直接使用平级路由即可，无需引入 Outlet：

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

内容的提问来源于stack exchange，提问作者Gunsela