title: How to define child routes as react components in react-router?
body: <p>I have <code>main.js</code>:</p>
  
  <pre><code>import { render } from 'react-dom';
  import { browserHistory, Router, Route, IndexRoute } from 'react-router';
  
  import Home from './containers/Home';
  import ApplicationsRoutes from './applications/routes';
  
  render((
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component="div"&gt;
        &lt;IndexRoute component={Home} /&gt;      
        &lt;ApplicationsRoutes /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  ), document.getElementById('app'));
  </code></pre>
  
  <p>And <code>/application/routes.js</code> :</p>
  
  <pre><code>import { browserHistory, Router, Route, IndexRoute } from 'react-router'
  
  import ApplicationsHome from './containers/ApplicationsHome';
  
  export default () =&gt; (
    &lt;Route path="applications" component={ApplicationsHome} /&gt;
  );
  </code></pre>
  
  <p>I was expecting that route from <code>/application/routes.js</code> will be added to the main router and so ApplicationsHome will be rendered for path <code>/applications</code></p>
  
  <p>Unfortunately, this is not a case. I am getting error:</p>
  
  <pre><code>Location "/applications" did not match any routes
  </code></pre>
  
  <p>For me it looks like such a way to compose Router does not work, but I cannot understand what is right way to do this.</p>