React Router 6多布局路由配置精简方案咨询

问题背景 #

你开发的应用包含登录/注册、accounts、account-types、websites四个模块，其中登录/注册使用<Auth />布局，后三个模块共用<Layout />布局。当前路由配置中，后三个模块的路由都重复书写了<Route path="xxx" element={<Layout />}结构，尝试的两种精简写法均因路由匹配逻辑错误导致大量报错。

错误写法原因分析 #

1. 数组Path写法：直接给<Route>的path传数组，会让所有子路由同时绑定到三个父路径下，导致非预期的路由匹配（比如/accounts/accountTypes会被错误匹配），若子路由使用绝对路径还会直接跳过父路由，无法渲染<Layout />。
2. Map循环全量子路由写法：每个父路由下都注入了所有模块的子路由，导致路由冲突、重复匹配，完全不符合模块路由的隔离需求。

正确精简方案 #

方案1：基于路由映射表的循环渲染（兼容现有路由结构） #

先定义父路径与对应子路由Key的映射关系，循环生成路由时仅注入对应模块的子路由：

// 定义Layout模块的路径与对应子路由Key映射
const layoutRouteGroups = [
  {
    path: "/accounts",
    childRouteKeys: ["accounts", "accountCreate", "accountEdit"]
  },
  {
    path: "/account-types",
    childRouteKeys: ["accountTypes", "accountTypeCreate", "accountTypeEdit"]
  },
  {
    path: "/websites",
    childRouteKeys: ["websites", "websiteCreate", "websiteEdit"]
  }
];

然后在路由配置中循环渲染：

<Route path="/" element={<Auth />}>
  <Route {...routes.getRoute('auth')} />
  <Route {...routes.getRoute('register')} />
</Route>

{layoutRouteGroups.map(({ path, childRouteKeys }) => (
  <Route key={path} path={path} element={<Layout />}>
    {childRouteKeys.map(key => (
      <Route key={key} {...routes.getRoute(key)} />
    ))}
  </Route>
))}

• 每个父路由仅挂载对应模块的子路由，避免冲突
• 添加key属性消除React列表渲染警告

方案2：React Router v6布局路由（更优雅的结构化写法） #

利用React Router v6的布局路由特性，将<Layout />作为公共父路由，所有需要该布局的子路由嵌套其中，无需重复书写布局组件：

<Route path="/" element={<Auth />}>
  <Route {...routes.getRoute('auth')} />
  <Route {...routes.getRoute('register')} />
</Route>

{/* 公共Layout路由，仅提供布局，无自身路径 */}
<Route element={<Layout />}>
  {/* Accounts模块路由 */}
  <Route path="/accounts">
    <Route index {...routes.getRoute('accounts')} />
    <Route path="create" {...routes.getRoute('accountCreate')} />
    <Route path="edit/:id" {...routes.getRoute('accountEdit')} />
  </Route>

  {/* Account-Types模块路由 */}
  <Route path="/account-types">
    <Route index {...routes.getRoute('accountTypes')} />
    <Route path="create" {...routes.getRoute('accountTypeCreate')} />
    <Route path="edit/:id" {...routes.getRoute('accountTypeEdit')} />
  </Route>

  {/* Websites模块路由 */}
  <Route path="/websites">
    <Route index {...routes.getRoute('websites')} />
    <Route path="create" {...routes.getRoute('websiteCreate')} />
    <Route path="edit/:id" {...routes.getRoute('websiteEdit')} />
  </Route>
</Route>

• 此写法要求子路由的path为相对路径（若原routes.getRoute返回绝对路径，需调整为相对路径）
• 结构清晰，完全消除布局代码重复

内容的提问来源于stack exchange，提问作者Mr.Singh