What is a good/elegant way to handle conditional layout rendering with React Router?

Question

I'm using react-router 2.4.0, but can upgrade to 4.x.x if it provides better ability to handle what I'm looking for, but let's say I have the following:

I have X number of pages: pageA, pageB, pageC, pageD, etc. Every page has 3 root-level components - Nav, Body, Footer. The footer is the same on every page. The Nav however depends on a redux state that indicates whether the user is logged in or not, I'd like to maybe render <Nav /> when logged in and <NavGuest /> or something when logged out. And then finally, the body just depends on which page you want to render, so pageA, pageB could use one layout and pageC, etc. could use another.

My current routes look like:

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="A" component={pageA} />
    <Route path="B" component={pageB} />
    <Route path="C" component={pageC} />
    etc...
    <Route path="*" component={NotFoundPage} />
</Route>

And inside my App component render() is where I use conditional logic based on redux to show <Nav /> or <NavGuest />, but not sure how to switch the layout based on the particular route. Can you add a custom param to a route, so that in the App component render you can read that and conditionally switch the layout?

Answer 1

What I ended up doing:

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route component={LayoutOne}>
        <Route path="A" component={pageA} />
        <Route path="B" component={pageB} />
    </Route>
    <Route component={LayoutTwo}>
        <Route path="C" component={pageC} />
        etc...
    </Route>
    <Route path="*" component={NotFoundPage} />
</Route>