React.Children.only 期望接收单个 React 元素孩子。？

Question

I have a DupRoute component that creates an array of Routes, when I add a DupRoute component to the Switch I get an Error, React.Children.only expected to receive a single React element child. Here is my cat. https://codesandbox.io/s/74548ypmk6

Answer 1

The issue says, somewhere in your code, you are having multiple components as children when it only accepts 1.

If I am not wrong, Route component inside of duproute.js doesn't accept multiple components. You have {" "} {text}{" "} inside of Route which I think is invalid.

Try changing

{" "}
{text}
{" "}

to

<Fragment>
     {" "}
     {text}
     {" "}
</Fragment>

Fragment can be safely used as it doesn't add any extra HTML element in our DOM.

Route component's responsibility is to render UI (that we give as part of props to it) when a location matches the route's path.

Answer 2

As you can see route is a complaint about to have multiple children to render it, So you need to use React Fragment to combine those multiple children like

 <Route
          key={id}
          component={component}
          render={render}
          children={children}
          path={path}
          exact={exact}
          strict={strict}
          location={location}
          sensitive={sensitive}
        >
         <>
          {" "}
          {text}{" "}
          </>
        </Route>