如何从一个组件返回多个路由？答案

【问题标题】：How do i return multiple routes from one component?如何从一个组件返回多个路由？
【发布时间】：2023-02-05 21:56:52
【问题描述】：

我需要做类似的事情

const RoutesList = () => (
   <Fragment>
     <Route .../>
     <Route .../>
     <Route .../>
   </Fragment>
)

并在Routes中使用它

...
<Routes>
   <RoutesList/>
</Routes>
...

但它抛出错误说Uncaught Error: [PreBuiltRoutes] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 即使我要返回片段。

【问题讨论】：

您是否尝试过返回一组路由而不是一个片段，然后使用展开运算符？
对我来说似乎很清楚：All component children of <Routes> must be a <Route> or <React.Fragment>。你的孩子不是这些，而是一个名为 RoutesList 的组件。
@RiadhAdrani 我确实尝试过，同样的错误，即使我直接返回 Route
@RobinZigmond 这是否意味着不可能做我正在做的事情？以及它们似乎有效的自定义保护路由如何
我不是 100% 确定我会遵循 - 但它听起来像返回一个数组，因为 @RiadhAdrani 建议可能是这样做的方法。

标签： javascript reactjs react-router-dom

【解决方案1】：

问题是 <RoutesList> 被 react-router 视为任何其他组件，但它期望 <Route> 或 <React.Fragment> 的数组。

我目前建议两种方法：

导出数组

使用 react-router-dom v6，你可以在Routes.js

import React from "react";
import { Route } from "react-router-dom";

export default [
  <Route .../>,
  <Route .../>,
  <Route .../>
];

然后，像这样使用它：

import Routes from "./Routes"

...
<Routes>...[{routes}]</Routes>
...

直接导出 React.Fragment

此外，您还可以导出片段：

export const RoutesAsFragment = (
  <>
    <Route ...>
    <Route ...>
    <Route ...>
  </>
);

并将它们用作对象：

<Routes>{RoutesAsFragment}</Routes>

这是一个example

【讨论】：

是的，这可行，但我们的包必须导出带有路由列表的反应组件，而不是数组
@howardwolowitz 您需要动态创建路线，还是一组固定路线？现在的问题是，当你使用功能组件RoutesList时，返回的是一个标准组件<RoutesList>，它会包裹<React.Fragment>。如果您的路由不是动态创建的，您可以将 Fragment 导出为 const。
我更新了我的答案，解释了你的方法目前如何不起作用。