如何在react-router-dom v6中将路由分组到独立组件中？

你的思路没问题，只是react-router-dom v6+对Routes的子元素有严格限制——Routes的直接子节点必须是Route组件，不能是自定义组件，所以你直接在Routes里用<Page1Routes/>会触发报错。

下面给你两种符合需求的模块化实现方案：

方案一：组件返回Route数组，在Routes中展开渲染 #

把每个页面的路由封装成返回Route元素数组的组件，然后在Routes中直接渲染这个数组：

// Page1Routes.js
function Page1Routes() {
  return [
    <Route path="page1" key="page1-root">
      <Route path=":id" element={<Page1Detail />} />
      <Route path="" element={<Page1Home />} />
    </Route>
  ];
}

// Page2Routes.js同理
function Page2Routes() {
  return [
    <Route path="page2" key="page2-root">
      <Route path=":id" element={<Page2Detail />} />
      <Route path="" element={<Page2Home />} />
    </Route>
  ];
}

然后在主路由中使用：

<Routes>
  {Page1Routes()}
  {Page2Routes()}
</Routes>

方案二：使用路由配置对象 + useRoutes钩子（更推荐） #

把路由结构拆分成模块化的配置对象，再通过useRoutes钩子生成路由，这种方式更易维护：

// routes/page1.js
const page1Routes = [
  {
    path: "page1",
    children: [
      { path: ":id", element: <Page1Detail /> },
      { path: "", element: <Page1Home /> }
    ]
  }
];

// routes/page2.js同理
const page2Routes = [
  {
    path: "page2",
    children: [
      { path: ":id", element: <Page2Detail /> },
      { path: "", element: <Page2Home /> }
    ]
  }
];

// 主路由文件
import { useRoutes } from "react-router-dom";
import page1Routes from "./routes/page1";
import page2Routes from "./routes/page2";

function AppRoutes() {
  const routes = [...page1Routes, ...page2Routes];
  return useRoutes(routes);
}

// 在App中使用
function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  );
}

这两种方案都能实现你按页面分组嵌套路由的需求，方案二更适合大型项目的路由管理。

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