Вложенные маршруты в REACT ROUTER DOM, обертывание компонентов в маршрутизаторе
У меня есть 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>
В Component1 и Component 2 я использую {this.props.children} как показано ниже:
render () {
return (
<div>
<SideBar />
<Header />
{this.props.children}
</div>
)
}
Это не работает, пожалуйста, помогите заставить эту структуру работать.
Ответы 1
"All children of a
<Switch>should be<Route>or<Redirect>elements. Only the first child to match the current location will be rendered." - react-router
Если вам нужен родительский компонент для компонентов маршрута, вы можете выполнить одно из следующих действий:
- Обернуть внутри компонентов
- Обернуть внутрь RouteProps - компонент
В любом случае вам нужно удалить все, кроме <Routes/> или <Redirects/> внутри <Switch>
Пример альтернативы 2:
<Route exact path='/' component = {()=> (
<Component1>
<Dashboard />
</Component1>
)} />