React Router v6带basename的404通配符路由实现求助

你可以通过嵌套根路由的方式，同时处理非/foo路径重定向和**/foo下未知路径捕获**的需求，具体调整如下：

调整后的路由代码 #

export const appRouter = createBrowserRouter(
  createRoutesFromElements(
    {/* 根容器路由，满足createRoutesFromElements单根元素要求 */}
    <Route>
      {/* 处理/foo前缀下的所有业务路由 */}
      <Route path="/" element={<Layout />}>
        {/* 替换原绝对路径为相对路径，避免绕过basename */}
        <Route path="login" element={<Login />} />
        <Route path="requestAccess" element={<RequestAccess />} />
        
        <Route element={<PrivateRoutes />}>
          <Route path="createEvent" element={<CreateEvent />} />
          {/* index路由匹配/foo根路径 */}
          <Route index element={<Dashboard />} />
          <Route path="admin-console" element={<UserAdminDashboard />} />
          <Route path="view-previous" element={<ViewPastEvent />} />
        </Route>

        {/* 捕获/foo下的未知路径，比如/foo/this-route-is-a-404 */}
        <Route path="*" element={<div>404：当前页面不存在</div>} />
        {/* 也可以改成重定向到/foo首页：<Route path="*" element={<Navigate to="/" replace />} /> */}
      </Route>

      {/* 捕获所有非/foo的路径，比如/bar，直接重定向到/foo */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Route>
  ),
  {
    basename: "/foo",
  }
);

关键说明 #

1. 根容器路由：用一个无path的<Route>作为唯一根元素，包裹两个子路由，解决createRoutesFromElements单根元素的限制。
2. 业务路由前缀处理：将原路由的绝对路径（比如/login）改为相对路径（login），确保所有路由自动继承basename="/foo"的前缀，避免路径匹配混乱。
3. 双场景404处理：
   • 内层path="*"：捕获/foo前缀下的所有未知子路径，可自定义404页面或重定向到首页。
   • 外层path="*"：捕获所有非/foo开头的路径，直接重定向到/foo（因为basename的存在，to="/"实际指向/foo）。
4. 移除exact属性：React Router v6默认采用精确匹配，无需手动添加exact。

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