在 react router 6 中，`
React Router 6 不再支持为单个 <Route> 指定多个路径（如 path={["/accounts", "/account-types"]}），因为其内部路径匹配逻辑严格依赖字符串形式的 path 值进行正则解析与优先级排序。直接传入数组会导致类型错误或运行时异常。但幸运的是，Router v6 提供了更优雅的替代方案：布局路由（Layout Routes）+ 嵌套路由（Nested Routes）。
✅ 正确写法：使用无 path 的 Layout 路由包裹多个子路径
核心思路是：将 <Layout /> 提升为一个父级布局路由（即不指定 path，仅通过 element 渲染布局），再在其内部为每个业务路径（如 /accounts、/account-types）定义独立的 <Route>，并让这些子路由承载各自的页面组件：
<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>? 注意：<Layout /> 必须在其 children 中渲染 <Outlet />，否则嵌套的子路由内容将无法显示：// Layout.tsx import { Outlet } from 'react-router-dom'; export const Layout = () => ( <div className="layout"> <Header /> <main> <Outlet /> {/* ← 关键！子路由内容将在此处渲染 */} </main> <Footer /> </div> );
? 进阶优化：复用路由渲染逻辑
为避免重复书写 renderRoutes([...])，可进一步封装工具函数，增强可读性与可维护性：
// 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>⚠️ 常见误区与注意事项
- ❌ 错误：<Route path={["/a", "/b"]} element={<Layout />} /> → path 必须为字符串；
- ❌ 错误：未在 <Layout /> 中使用 <Outlet /> → 子路由内容不会渲染；
- ✅ 推荐：将认证路由（/auth, /register）与受保护路由严格分离，便于后续添加权限守卫（如 element={<RequireAuth><Layout /></RequireAuth>}）；
- ✅ 提示：所有 renderRoutes(...) 调用中，确保 routes.getRoute(key) 返回符合 RouteProps 类型的对象（含 index、element、path 等字段）。
通过以上结构，你不仅消除了冗余的 <Layout /> 声明，还使路由组织更具层次感和扩展性——未来新增模块（如 /billing）只需追加一项配置即可，无需修改布局逻辑。
