React Router 6嵌套子路由渲染异常 所有路径仅渲染Main组件

所有/main前缀的路径（/main、/main/test、/main/fake）访问时都只渲染Main组件，子路由对应的Test、NotFound组件完全不显示。已尝试移除根级index路由、移除通配符匹配的NotFound路由，问题没有解决。
当前路由配置代码：

<BrowserRouter>
  <Routes>
    <Route index element={<Main />} />
    <Route path='/main' element={<Main />} >
      <Route path="test" element={<Test />} />
      <Route path="*" element={<NotFound />} />
    </Route>
  </Routes>
</BrowserRouter>

React Router v6 的嵌套路由机制要求：父级路由组件必须内置<Outlet />组件，作为子路由匹配内容的渲染占位。你的Main组件中没有添加<Outlet />，子路由匹配到的组件没有挂载位置，因此无论访问哪个子路径，都只会渲染Main本身的内容。

1. 从依赖包中引入Outlet组件：

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

2. 在Main组件中需要展示子页面内容的位置插入<Outlet />，参考示例：

function Main() {
  return (
    <div>
      {/* Main组件自身的固定内容，比如导航、侧边栏、公共页头 */}
      <nav>Main页面导航栏</nav>
      {/* 子路由匹配到的组件会渲染在这个位置 */}
      <Outlet />
    </div>
  )
}

3. 补充配置（可选）：当前/main路径下没有配置index子路由，修复后访问/main时，<Outlet />位置会显示为空。如果需要访问/main时默认展示内容，可以在/main的子路由列表中添加index路由：

<Route path='/main' element={<Main />} >
  {/* 新增main路径下的默认首页路由 */}
  <Route index element={<div>Main页面默认内容</div>} />
  <Route path="test" element={<Test />} />
  <Route path="*" element={<NotFound />} />
</Route>

修复后效果：

• 访问/main：渲染Main组件公共内容+index路由配置的默认内容
• 访问/main/test：渲染Main组件公共内容+Test组件
• 访问/main下其他不存在的路径：渲染Main组件公共内容+NotFound组件

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