hierarchy in react Router

Question

I'm learning react, and I try to create some routes, I have this code on my entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';

import App from './app/Components/AppComponent';
import SupervisoryReport from './app/Components/SupervisoryReportComponent';
import Topmenu from './app/Components/TopmenuComponent';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={SupervisoryReport} />
            <Route path="test">
            </Route>
        </Route>
    </Router>,
    document.getElementById('app')
);

This works fine. What I need now is when I navigate to /test to still render the Supervisory report, and add some stuff. But apparently, it only renders what is inside the current route, and not upper routes.

Any idea how to do that?

EDIT

Here is more explain what I want to do:

Let's suppose I have a route /supervisory-report which have 20 pages inside like: /supervisory-report/page-1, /supervisory-report/page-2, etc

every one of that pages must have a component.

then I have some other routes, like '/test'.

Is there a way for all pages inside Supervisory Report, to show the same component, instead of rendering again in each component for each route?

Answer 1

If you want every route to contain SupervisoryReport inside of App, you don't need to have this logic in your routing. I think it would be better to modify your App component's render method:

return (
    <div>
        <SupervisoryReport>
            {this.props.children} // if you want the component to be inside
        </SupervisoryReport>
        {this.props.children} // if you want the component to be after
    </div>);

And then your routing can be simplified to:

<Route path="/" component={App}>
    <Route path="test" component={TestComponent} />
</Route>

I think it only makes sense to include SupervisoryReport in your route config if you plan on swapping it out when the route changes. If this is the case, you can try something like:

<Route path="/" component={App}>
    <Route path="other" component={OtherComponent}/>
    <Route path="*" component={SupervisoryReport}>
        <Route path="test" component={TestComponent} />
    </Route>
</Route>

Note that you must have the * path last, as react will not check for any routes once it finds a match.

Edit: To solve your problem, I would try something like:

<Route path="/" component={App}>
    <Route path="test" component={TestComponent}/>
    <Route path="supervisory-report" component={SupervisoryReport}>
        <Route path="page-1" component={PageOneComponent}/>
        <!-- etc -->
    </Route>
</Route>

Answer 2

It seem from your code there is no component that is attached to the path "test". Your Route should be like this

 <Route path="/" component={App}>
            <IndexRoute component={SupervisoryReport} />
            <Route path="test" component={TestComponent}/>

        </Route>