在Switch中使用DupRoute组件报错：React.Children.only期望单个React元素子节点

这个问题我之前也踩过坑，本质是Switch组件对直接子元素的限制导致的：它只能识别直接嵌套的<Route>/<Redirect>这类React元素，没法直接处理返回数组的组件。当你把<DupRoute>放在Switch里时，DupRoute返回的Route数组会被React当成多个独立的子节点传递给Switch，而Switch内部的处理逻辑（比如依赖React.Children.only来校验子元素）会把这种数组当成不符合要求的输入，从而抛出错误。

下面给你两种可行的解决方案：

方案一：用Fragment包裹Route数组 #

修改你的DupRoute组件，让它返回一个被**React.Fragment（或简写<>）**包裹的内容，这样组件整体返回的是单个React元素，Switch就能正确识别内部的Route了。

示例代码：

import React from "react";
import { Route } from "react-router-dom";
import A from "./A";
import B from "./B";

const DupRoute = () => {
  return (
    <>
      {/* 注意给每个Route添加唯一key，避免React列表警告 */}
      <Route key="route-a" path="/a" component={A} />
      <Route key="route-b" path="/b" component={B} />
    </>
  );
};

export default DupRoute;

之后你就可以正常在Switch里使用<DupRoute />了：

<Switch>
  <DupRoute />
  {/* 其他Route/Redirect */}
</Switch>

方案二：直接展开数组作为Switch的子元素 #

如果你的DupRoute原本就是返回数组的纯函数（而非组件），可以直接调用它并展开数组元素，让每个Route成为Switch的直接子元素：

示例代码：

// 先把DupRoute改成返回数组的函数
const getDupRoutes = () => [
  <Route key="route-a" path="/a" component={A} />,
  <Route key="route-b" path="/b" component={B} />
];

// 在Switch里展开使用
<Switch>
  {...getDupRoutes()}
  {/* 其他Route/Redirect */}
</Switch>

这种方式相当于把数组里的每个Route直接放到Switch下，完全符合Switch对直接子元素的要求。

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