在 react router 6 中，`` 的 `path` 属性不支持数组，但可通过嵌套路由结构将多个路径统一包裹在同一个布局组件下，避免重复声明 ``，提升路由配置的可维护性与简洁性。

React Router 6 不再支持为单个 指定多个路径（如 path={["/accounts", "/account-types"]}），因为其内部路径匹配逻辑严格依赖字符串形式的 path 值进行正则解析与优先级排序。直接传入数组会导致类型错误或运行时异常。但幸运的是，Router v6 提供了更优雅的替代方案：布局路由（Layout Routes）+ 嵌套路由（Nested Routes）。

✅ 正确写法：使用无 path 的 Layout 路由包裹多个子路径

核心思路是：将 提升为一个父级布局路由（即不指定 path，仅通过 element 渲染布局），再在其内部为每个业务路径（如 /accounts、/account-types）定义独立的 ，并让这些子路由承载各自的页面组件：

<Routes>
  {/* 认证相关路由 —— 独立使用 <Auth /> 布局 */}
  <Route path="/" element={<Auth />}>
    {renderRoutes(["auth", "register"])}
  </Route>

  {/* 统一受保护的主布局 —— 所有需 Layout 的路径都嵌套在此之下 */}
  <Route element={<Layout />}>
    <Route path="/accounts">
      {renderRoutes(["accounts", "accountCreate", "accountEdit"])}
    </Route>
    <Route path="/account-types">
      {renderRoutes(["accountTypes", "accountTypeCreate", "accountTypeEdit"])}
    </Route>
    <Route path="/websites">
      {renderRoutes(["websites", "websiteCreate", "websiteEdit"])}
    </Route>
  </Route>
</Routes>

? 注意： 必须在其 children 中渲染 ，否则嵌套的子路由内容将无法显示：// Layout.tsx import { Outlet } from 'react-router-dom'; export const Layout = () => ( {/* ← 关键！子路由内容将在此处渲染 */} );

? 进阶优化：复用路由渲染逻辑

为避免重复书写 renderRoutes([...])，可进一步封装工具函数，增强可读性与可维护性：

React Wrap

React UI？—— JavaScript？

下载

// utils/routing.ts
export const renderRoutes = (keys: string[]) =>
  keys.map(key => (
    <Route key={key} {...routes.getRoute(key)} />
  ));

你甚至可以将路径与对应路由键映射为配置对象，实现完全声明式管理：

const layoutRoutes = [
  { path: "/accounts", keys: ["accounts", "accountCreate", "accountEdit"] },
  { path: "/account-types", keys: ["accountTypes", "accountTypeCreate", "accountTypeEdit"] },
  { path: "/websites", keys: ["websites", "websiteCreate", "websiteEdit"] },
];

// 在 JSX 中使用
<Route element={<Layout />}>
  {layoutRoutes.map(({ path, keys }) => (
    <Route key={path} path={path}>
      {renderRoutes(keys)}
    </Route>
  ))}
</Route>

⚠️ 常见误区与注意事项

• ❌ 错误：} /> → path 必须为字符串；
• ❌ 错误：未在 中使用 → 子路由内容不会渲染；
• ✅ 推荐：将认证路由（/auth, /register）与受保护路由严格分离，便于后续添加权限守卫（如 element={}）；
• ✅ 提示：所有 renderRoutes(...) 调用中，确保 routes.getRoute(key) 返回符合 RouteProps 类型的对象（含 index、element、path 等字段）。

通过以上结构，你不仅消除了冗余的 声明，还使路由组织更具层次感和扩展性——未来新增模块（如 /billing）只需追加一项配置即可，无需修改布局逻辑。