Customize React Router Render Order

0
votes

I'm having an issue with the render order of Routes in React Router. As I understand it, any child Routes will render after their parents, and therefore be rendered on top of their parents in the DOM.

<Route path="/" component={Nav}> <IndexRoute component={IndexView} /> <Route path="/browse" component={BrowseView} /> </Route>

I have this Router setup, but after I navigate from the IndexRoute to the /browse route, the browse route renders on top of my Nav Component, and I can't click anything on the Nav Component.

My question is how to force the Nav Component to always render last, or if there's a better way of architecting my app to avoid this.

Thanks!

2
reactjsreact-router
If you have elements appearing over each other (and preventing clicking) isn't this solved via CSS with a z-index property on the Nav component? - Ashley 'CptLemming' Wilson
that did the trick! thanks @Ashley'CptLemming'Wilson - Andrew Wong

2 Answers

2
votes

You can try this using switch:

import { BrowserRouter, Route, Switch, browserHistory } from 'react-router-dom';

    <BrowserRouter history={browserHistory}>
          <div>
            <Route component={Nav} />
            <Switch>
              <Route path="/" component={IndexView} />
              <Route path="/browse" component={BrowseView}/>
            </Switch>
          </div>
        </BrowserRouter>

I recommend you see the documentation:

https://reacttraining.com/react-router/web/api/Switch

or you can follow this tutorial: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

1
votes

How about splitting relative and absolute route like this:

<Router>
    <Route path="/" component={Nav}>
        <IndexRoute component={IndexView} />
    </Route>
    <Route path="/browse" component={BrowseView} />
</Router>