Вложенные маршруты в REACT ROUTER DOM, оборачивая компоненты в маршрутизатор

Question

У меня есть 2 компонента, я хочу один компонент, общий для некоторых маршрутов, и другой компонент, общий для остальных маршрутов.

В обоих компонентах я использую {props.children} в обоих компонентах для вложенных маршрутов.

Мой код:

<Router history={history}>
  <div className='routeContainer'>
    <Switch>

      <Component1>
        <Route exact path='/' component={Dashboard} />
        <Route exact path='/abc' component={ComponentAbc} />
      </Component1>

      <Component2>
        <Route exact path='/def' component={ComponentDEF} />
        <Route exact path='/xyz' component={ComponentXYZ} />
      </Component2>
    </Switch>
  </div>
</Router>

В Компоненте 1 и Компоненте 2Я использую {this.props.children}, как показано ниже:

render () {
 return (
  <div>

      <SideBar />
      <Header />
      {this.props.children} 
  </div>
 )
}

Это не работает, пожалуйста, помогите, чтобы эта структура работала.

Answer 1

"Все дочерние элементы <Switch> должны быть <Route> или <Redirect> элементами. Будет отображен только первый дочерний элемент, соответствующий текущему местоположению."- реагирующий маршрутизатор

Если вам нужен родительский компонент компонентов маршрута, вы можете выполнить одно из следующих действий:

1. Перенос внутри компонентов
2. Обтекание внутри RouteProps - компонент

В любом случае вам нужно удалить все, кроме <Routes/> или <Redirects/> внутри <Switch>

Пример для альтернативы 2 :

<Route exact path='/' component={()=> (
  <Component1>
    <Dashboard />
  </Component1>  
)} />