如何导入或仅使用子组件？

Question

例如我有这些组件

first.js

<div>
   <Route path='/' />
   <Route path='/first' />
</div>

second.js

<div>
    <Route path='/second' />
    <Redirect to='/something' />
</div>

然后我有一个组件有这个

<Switch>
    <First>
    <Second>
</Switch>

我正在使用 React-Router，如果它的子组件不是 Route，Switch 将无法工作。那么，如何从第一个和第二个组件中剥离这些 div，只剩下路由呢？

Answer 1

您可以 return 将它们放在一个数组中：

return [
  <Route path='/' key='root' />,
  <Route path='/first' key='first' />
]

注意： return需要一个数组来提供一个关键道具。

Answer 2

您可以像这样将它们包装在片段中：

<React.Fragment>
  <Route path='/' />
  <Route path='/first' />
</React.Fragment>

How to import or use only child components?