React路由：从组件返回多Route报错，如何解决？

React Router 的 <Routes> 组件要求直接子元素必须是 <Route> 或 <React.Fragment>，你的 <RoutesList> 是自定义组件，即便它内部返回了 Fragment，<Routes> 识别的是外层的自定义组件，而非内部的 Fragment，因此触发报错。

方案1：让 RoutesList 返回 Route 数组 #

将组件改为返回包含多个 <Route> 的数组（注意给每个 Route 加唯一 key），然后在 <Routes> 中通过函数调用的方式渲染这个数组：

import { Route } from 'react-router-dom';

const RoutesList = () => [
  <Route path="/" element={<Home />} key="route-home" />,
  <Route path="/about" element={<About />} key="route-about" />,
  <Route path="/contact" element={<Contact />} key="route-contact" />
];

// 使用时
<Routes>
  {RoutesList()}
</Routes>

方案2：使用 useRoutes 钩子（更优雅） #

利用 React Router 提供的 useRoutes 钩子定义路由配置，它会直接返回匹配的路由元素，无需手动包裹 <Route>：

import { useRoutes } from 'react-router-dom';

const RoutesList = () => useRoutes([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  { path: "/contact", element: <Contact /> }
]);

// 使用时，无需再包裹 <Routes>
function App() {
  return <RoutesList />;
}

方案3：直接在 Routes 内部展开 Fragment 返回值 #

如果坚持用自定义组件形式，可以让 RoutesList 返回 Fragment，但使用时不要用组件标签，而是直接调用函数获取返回值：

import { Fragment, Route } from 'react-router-dom';

const RoutesList = () => (
  <Fragment>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Fragment>
);

// 使用时
<Routes>
  {RoutesList()}
</Routes>

这种方式本质是把 Fragment 作为 <Routes> 的直接子元素，而非自定义组件，因此能绕过报错。

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