Как импортировать или использовать только дочерние компоненты?

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, и Switch не работает, если его дочерние компоненты не Route.Так как же просто убрать эти div из первого и второго компонентов, чтобы маршруты остались только?

Answer 1

Вы можете обернуть их фрагментом так:

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

Answer 2

Вы можете вернуть их в массиве:

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

Примечание: возвращение массива необходимо для обеспечения реквизита ключа.