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

У меня есть 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>
 )
}

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


reactjs react-router-dom react-router-v4 routing
person Tarik Sahni    schedule 30.05.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

«Все дочерние элементы <Switch> должны быть элементами <Route> или <Redirect>. Будет отображаться только первый дочерний элемент, соответствующий текущему местоположению». - react-router

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

  1. Обернуть внутри Компоненты
  2. Обернуть внутри RouteProps — компонент

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

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

<Route exact path='/' component={()=> (
  <Component1>
    <Dashboard />
  </Component1>  
)} />
person Jakob Göran Thomasson    schedule 30.05.2018