title: React-router not able to load nested pages
body: <p>Am just not able to make react-router load the nested pages.</p>
  
  <p>I have the following configuration for React-Router</p>
  
  <pre><code>import React from 'react';
  import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
  import { createHistory } from 'history';
  
  import App from './components/app';
  import Authors from'./components/authors/authorPage';
  import About from'./components/about/aboutPage';
  
  const appHistory = useRouterHistory(createHistory)({ basename: "/" });
  
  const Routes = () =&gt; 
  {
      const routes = (
          &lt;Route path="/" component={App}&gt;
              &lt;Route path="/about" component={About}/&gt;
              &lt;Route path="/authors" component={Authors}/&gt;
          &lt;/Route&gt;
      );
  
      return (
      &lt;Router history={ appHistory }&gt;
          {routes}
      &lt;/Router&gt;);
  };
  
  export default Routes;
  </code></pre>
  
  <p>And its getting called via links in the header page as</p>
  
  <pre><code>import React from 'react';
  import { Router, Route, Link } from 'react-router';
  
  const Header = () =&gt;
  {
      return (
          &lt;nav className="navbar navbar-default"&gt;
              &lt;div className="container-fluid"&gt;
                  &lt;a href="/" className="navbar-brand"&gt;
                      &lt;img src="images/pluralsight-logo.png"/&gt;
                  &lt;/a&gt;
                  &lt;ul className="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;Link to="/authors"&gt;Authors&lt;/Link&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      );
  };
  
  export default Header;
  </code></pre>
  
  <p>App component is</p>
  
  <pre><code>import Home from './homePage';
  import Header from './common/header';
  
  const App = () =&gt;
  {
      return (
          &lt;div&gt;
              &lt;Header /&gt;
              &lt;div className="container-fluid"&gt;
                  &lt;Home/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <p>The root App loads just fine and I see the main root page. However, clicking on any of the link just changes the address bar to that link (<code>http://localhost:9005/about</code>) but nothing renders, the about page never loads.</p>
  
  <p>In fact, if I manually enter that page (<code>http://localhost:9005/about</code>) I get the error</p>
  
  <p><code>Cannot GET /about</code></p>