Nested routing in react -router v4

Question

<Provider store = {store}>
    <Router history = {history} >
       <section>
            <HeaderWithRouter>
                <Route exact path = "/admin" component={Admin}/>
                <Route exact path = "/deal" component={FormDeal}/>
                <Route exact path="/chart" component={Mycharts}/>
                <SubHeaderWithRouter>
                    <Route exact path="/dealview" component={FinalTable}/>
                    <Route exact path = "/mandate" component={Mandate}/>
                </SubHeaderWithRouter>  
            </HeaderWithRouter>
            <Footer/>
       </section>
  </Router>
  </Provider>

I need to render SubHeaderWithRouter only for the sub routes specified inside it i.e FinalTable and Mandate. Currently SubHeaderWithRouter is rendered for every route.

see @cdaiga if my route is /admin then i dont want SubHeaderWithRouter to get rendered. i want to render SubHeaderWithRouter only for /dealview and /mandate — Yash Sharma
– Yash Sharma, Commented Sep 19, 2017 at 10:39

Shubham Khatri · Accepted Answer · 2017-09-19 10:44:47Z

You can specify the regex path for which you want to render the SubHeaderWithRouter component

<Provider store = {store}>
    <Router history = {history} >
       <section>
            <HeaderWithRouter>
                <Route exact path = "/admin" component={Admin}/>
                <Route exact path = "/deal" component={FormDeal}/>
                <Route exact path="/chart" component={Mycharts}/>
                <Route path="/(dealview|mandate)" component={SubHeaderWithRouter}/>
            </HeaderWithRouter>
            <Footer/>
       </section>
  </Router>

and then inside it, specify the actual Routes like

render() {
    return (
         <div>
             {/*other things*/}
             <Route exact path="/dealview" component={FinalTable}/>
             <Route exact path = "/mandate" component={Mandate}/>
         </div>
     )

}

Collectives™ on Stack Overflow

Nested routing in react -router v4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related