CODEWITHSUNDEEP
reactjsroutesreact-router-v4react-router-dom
Tarik Sahni
Tarik Sahni

Reputation: 168

Nested Routes in REACT ROUTER DOM, wrapping Components in Router

I have 2 components, I want One component common in some of the routes and other component common in remaining routes.

In the both component I am using {props.children} in both component for the nested routes.

MY code is :

<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>

In Component1 and Component 2 i am using {this.props.children} its as below :

render () {
 return (
  <div>

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

This is not working, Please Help to make this structure working.

Upvotes: 0

Views: 2671

Answers (1)

Jakob G&#246;ran Thomasson
Jakob G&#246;ran Thomasson

Reputation: 424

"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

If you want a parent of the route components, you can do one of the following:

  1. Wrap inside Components
  2. Wrap inside RouteProps - component

Either way you need to remove everything but <Routes/> or <Redirects/> inside <Switch>

Example for alternative 2:

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

Upvotes: 4

Related Questions