React-如何从React中剥离顶级div。组成部分

const routesList1 = (
    <Route exact path="/link1" component={Link1UI}/>
    <Route exact path="/link2" component={Link2UI}/>
)

但这将:

const routesList1 = (
  <div>
    <Route exact path="/link1" component={Link1UI}/>
    <Route exact path="/link2" component={Link2UI}/>
  </div>
)

下面是我在React路由器的开关元件中遇到的一个问题的概念性示例。

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

const routesList1 = (
  <div>
    <Route exact path="/link1" component={Link1UI}/>
    <Route exact path="/link2" component={Link2UI}/>
  </div>
)

const routesList2 = (
  <div>
    <Route exact path="/link3" component={Link3UI}/>
    <Route exact path="/link4" component={Link4UI}/>
  </div>
)

function stripDivFrom(reactElement) {
    reactElement.Children.toArray();
}

class MyApp extends React.Component {
    render() {
        return (
            <Switch>
                {stripDivFrom(routesList1)}
                {stripDivFrom(routesList2)}
                <Route exact path="/help" component={HelpUI}/>
            </Switch>
        );
    }
}

我提供了这个简化的示例代码,以便读者能够理解我的要求。

问题是:如何获得给定react/JSX元素的子元素?如何更改stripDivFrom()函数使其工作。

已更新

<React.Fragment> 添加了解决此问题的。

    const routesList1 = (
      <React.Fragment>
        <Route exact path="/link1" component={Link1UI}/>
        <Route exact path="/link2" component={Link2UI}/>
      </React.Fragment>
    )