title: hierarchy in react Router
body: <p>I'm learning react, and I try to create some routes, I have this code on my entry point:</p>
  
  <pre><code>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(
      &lt;Router history={browserHistory}&gt;
          &lt;Route path="/" component={App}&gt;
              &lt;IndexRoute component={SupervisoryReport} /&gt;
              &lt;Route path="test"&gt;
              &lt;/Route&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>This works fine. What I need now is when I navigate to <code>/test</code> 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.</p>
  
  <p>Any idea how to do that?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is more explain what I want to do:</p>
  
  <p>Let's suppose I have a route <code>/supervisory-report</code> which have 20 pages inside like: <code>/supervisory-report/page-1</code>, <code>/supervisory-report/page-2</code>, etc</p>
  
  <p>every one of that pages must have a component.</p>
  
  <p>then I have some other routes, like '/test'.</p>
  
  <p>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?</p>