React嵌套路由仅部分生效，子路由返回404求助

你遇到的问题出在两个核心配置上：

1. 子模块路由使用了绝对路径
   admin/main.tsx里的路由路径带了开头的/（比如/:id、/foo），这会让React Router去匹配根路径下的地址（如/123、/foo），而非/admin的子路径。

2. 主路由未捕获/admin下的子路径
   main.tsx里的/admin路由仅精确匹配/admin路径，当访问/admin/123这类子路径时，主路由找不到对应匹配项，直接触发最后的404路由。

修改步骤： #

1. 调整main.tsx的路由配置

将/admin的路由路径改为admin/*，让它能捕获所有/admin开头的子路径：

// ... imports etc.

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route index element={<div>Home</div>} />
        {/* 用admin/*匹配所有/admin下的子路径 */}
        <Route path="admin/*" element={<AdminApp />} />
        <Route path="*" element={<div>404</div>} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

2. 修改admin/main.tsx的路由路径

去掉路径开头的/，改用相对路径，让路由基于当前的/admin路径匹配：

// ... imports etc.

export const AdminApp = () => (
  <Routes>
    <Route index element={<div>Admin Home</div>} />
    {/* 相对路径，匹配/admin/:id */}
    <Route path=":id" element={<div>Admin for ID</div>} />
    {/* 相对路径，匹配/admin/foo */}
    <Route path="foo" element={<div>Admin Foo</div>} />
  </Routes>
);

修改完成后，访问/admin/123和/admin/foo就能正常渲染对应组件了。

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