React-router-dom v6中如何在主路由中整合独立的AdminRoutes

你的问题出在对 React Router v6 路由结构的理解上：Routes 是路由匹配的顶层容器，不能在另一个 Routes 内部嵌套 Routes。你当前的 AdminRoutes 返回了完整的 Routes 组件，再将其作为 App 中某个 Route 的 element，导致路由无法正确匹配。

下面提供两种可行的解决方案：

方案一：拆分路由片段（保持 AdminRoutes 独立） #

修改 AdminRoutes，移除外层的 Routes，只返回 path='admin' 的父路由及其子路由，这样可以直接在 App 的顶层 Routes 中引入：

function AdminRoutes() {
  return (
    <Route path='admin' element={<MainLayout />}>
      <Route index element={<DashBoard />} />
      <Route path='product-lists' element={<ProductList />} />
      <Route path='add-product' element={<AddProduct />} />
      <Route path='edit-product/:id' element={<AddProduct />} />
      <Route path='add-blog' element={<AddBlog />} />
      <Route path='edit-blog/:id' element={<AddBlog />} />
      <Route path='blog-list' element={<BlogList />} />
      <Route path='add-blog-category' element={<AddBlogCategory />} />
      <Route path='edit-blog-category/:id' element={<AddBlogCategory />} />
      <Route path='blog-category-list' element={<BlogCategoryList />} />
      <Route path='orders' element={<Orders />} />
      <Route
        path='view-orders/:userId/:transitionId'
        element={<ViewOrders />}
      />
      <Route path='customers' element={<Customers />} />
      <Route path='color-lists' element={<Colors />} />
      <Route path='add-color' element={<AddColor />} />
      <Route path='edit-color/:id' element={<AddColor />} />
      <Route path='category-lists' element={<CategoryList />} />
      <Route path='add-category' element={<AddCategory />} />
      <Route path='edit-category/:id' element={<AddCategory />} />
      <Route path='brand-lists' element={<BrandList />} />
      <Route path='add-product-brand' element={<AddBrand />} />
      <Route path='edit-product-brand/:id' element={<AddBrand />} />
      <Route path='add-coupon' element={<AddCoupon />} />
      <Route path='coupon-lists' element={<CouponList />} />
      <Route path='inquiry' element={<Inquiry />} />
      <Route path='view-inquiry/:id' element={<ViewInquiry />} />
      <Route path='specific-data' element={<SpecificDataPage />} />
      <Route path='table' element={<DataTable />} />
    </Route>
  );
}

然后在 App 的 Routes 中直接引入该组件，作为同级路由：

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index exact element={<Home />} />
            <Route path='about' element={<About />} />
            <Route path='contact' element={<ContactUs />} />
            <Route path='product' element={<OurStore />} />
            <Route path='product/:id' element={<SingleProduct />} />
            <Route path='blog' element={<BlogPage />} />
            <Route path='blog/:id' element={<SingleBlog />} />
            <Route
              path='cart'
              element={<PrivateRoutes><Cart /></PrivateRoutes>}
            />
            <Route 
              path='checkout-success/:userId/:transitionId'
              element={<CheckoutSuccess />}
            />
            <Route path='canceled' element={<CheckoutCancel />} />
            <Route path='orderlists/:id' element={<OrderList />} />
            <Route path='cancel' element={<CheckoutCancel />} />
            <Route path='checkout' element={<Checkout />} />
            <Route path='compare-product' element={<CompareProduct />} />
            <Route path='wishlist' element={<WishList />} />
            <Route path='login' element={<Login />} />
            <Route path='signup' element={<SignUp />} />
            <Route path='forgot-password' element={<ForgotPassword />} />
            <Route
              path='reset-password/:id/:uniqueToken'
              element={<ResetPassword />}
            />
            <Route path='shipping-policy' element={<ShippingPolicy />} />
            <Route path='privacy-policy' element={<PrivacyPolicy />} />
            <Route path='refund-policy' element={<RefundPolicy />} />
            <Route 
              path='term-conditions' 
              element={<TermAndConditions />} 
            />
            <Route path='*' element={<NotFound />} />
          </Route>

          {/* 直接引入 AdminRoutes */}
          <AdminRoutes />

        </Routes>
      </BrowserRouter>
    </>
  );
}

方案二：结合 Outlet 实现权限控制（推荐用于需验证的后台路由） #

如果后续要给后台路由加管理员权限验证，可以把 AdminRoutes 改成布局组件，用 Outlet 渲染子路由内容：

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

function AdminRoutes() {
  // 替换为实际的权限判断逻辑，比如检查用户角色、登录状态
  const isAdmin = true;

  if (!isAdmin) {
    // 无权限则跳转到登录页
    return <Navigate to='/login' replace />;
  }

  return (
    <MainLayout>
      <Outlet /> {/* 渲染子路由的内容 */}
    </MainLayout>
  );
}

然后在 App 的 Routes 中配置后台路由，将 AdminRoutes 作为父路由的 element：

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          {/* 前端公共路由 */}
          <Route path='/' element={<Layout />}>
            {/* 公共路由内容... */}
          </Route>

          {/* 后台路由配置 */}
          <Route path='admin' element={<AdminRoutes />}>
            <Route index element={<DashBoard />} />
            <Route path='product-lists' element={<ProductList />} />
            <Route path='add-product' element={<AddProduct />} />
            {/* 其他后台子路由... */}
          </Route>

          <Route path='*' element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

核心注意点 #

1. React Router v6 中，Routes 是唯一的顶层路由匹配容器，所有路由必须作为它的直接或间接子元素，不能嵌套 Routes。
2. 拆分路由模块时，推荐封装路由片段（单个/多个 Route 组件），而非完整的 Routes。
3. 权限控制通过父路由的 element 组件结合 Outlet 实现，这是 v6 推荐的嵌套布局方式。

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