0

I'm building a webapp that uses the same Nav bar (called NavigationController) on every page. So I'm trying to get React Router to do something like this:

<BrowserRouter>
  <Switch>
     <Route path='/' component={NavigationContainer}>
         <Route exact path='/path1' component={Comp1} />
         <Route exact path='/path2' component={Comp2} />
         <Route exact path='/path3' component={Comp3} />
     </Route>
  </Switch>
</BrowserRouter>

Just so the nav bar doesn't have to be rendered repeatedly when the user navigates to another page. However this doesn't seem to be working. I don't see any props of the child components being passed in (I wanted to do something like this in NavigationController:

render() {
    ...
    return (
        <div>
            //Nav bar UI goes here
            {this.props.children} // Ideally, Comp1/2/3 should be rendered here
        </div>
    );
}

What's the recommended way to implement this? Am I missing something?

ddolce
  • 739
  • 2
  • 10
  • 30
  • If it helps, i also got the following warning message: `Warning: You should not use and in the same route; will be ignored`. Im not sure where else to put the two components – ddolce Dec 21 '18 at 08:21
  • please check the duplicate post. It will definitely solve your issue – Shubham Khatri Dec 21 '18 at 08:24

0 Answers0