React Router v6中如何将两组路由合并到同一路径下

你遇到的问题是因为React Router的嵌套路由规则限制：父<Route>的子元素必须是<Route>组件，而不是包含<Routes>的组件。下面给你两种可行的解决方案：

方案一：改造子路由组件，返回<Route>集合 #

把原来包裹在<Routes>里的子路由改成直接返回<Route>元素（用React片段包裹避免多余DOM节点）：

// EditRoutes.jsx
import { Fragment, Route } from 'react-router-dom';
import EditPage from './EditPage';

const EditRoutes = () => (
  <Fragment>
    <Route path=":id/edit" element={<EditPage />} />
  </Fragment>
);

export default EditRoutes;

// PreviewRoutes.jsx
import { Fragment, Route } from 'react-router-dom';
import PreviewPage from './PreviewPage';

const PreviewRoutes = () => (
  <Fragment>
    <Route path=":id/preview" element={<PreviewPage />} />
  </Fragment>
);

export default PreviewRoutes;

然后在根路由中，父路由需要通过<Outlet />来渲染子路由内容：

import { Routes, Route, Outlet } from 'react-router-dom';
import EditRoutes from './EditRoutes';
import PreviewRoutes from './PreviewRoutes';

const AppRoutes = () => (
  <Routes>
    <Route path="/page/*" element={<Outlet />}>
      <PreviewRoutes />
      <EditRoutes />
    </Route>
  </Routes>
);

方案二：提取路由数组，直接合并 #

如果不想修改子路由组件的结构，可以把路由定义成数组导出，在根路由中直接合并：

// EditRoutes.jsx
import { Route } from 'react-router-dom';
import EditPage from './EditPage';

export const editRoutes = [
  <Route key="edit-page" path=":id/edit" element={<EditPage />} />
];

// PreviewRoutes.jsx
import { Route } from 'react-router-dom';
import PreviewPage from './PreviewPage';

export const previewRoutes = [
  <Route key="preview-page" path=":id/preview" element={<PreviewPage />} />
];

根路由中直接引入并拼接数组：

import { Routes, Route, Outlet } from 'react-router-dom';
import { editRoutes } from './EditRoutes';
import { previewRoutes } from './PreviewRoutes';

const AppRoutes = () => (
  <Routes>
    <Route path="/page/*" element={<Outlet />}>
      {previewRoutes}
      {editRoutes}
    </Route>
  </Routes>
);

为什么原写法无效？ #

原代码中，<PreviewRoutes/>和<EditRoutes/>内部都包含<Routes>组件，而React Router的嵌套路由要求父<Route>的子节点必须是<Route>类型，嵌套的<Routes>会被当成普通React组件，无法被路由系统识别匹配。

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