title: React router returning blank page when accessed directly from browser address bar
body: <p>I am trying to build a react app with 2 levels of navigation using a side bar and a header. When I navigate using the links everything works fine. But when I try to enter the address directly in the browser address-bar. the levels work but the headers do not. For the headers, the whole page disappears and I see a blank page. </p>
  
  <p>I am new to react, so would greatly appreciate any advice on what I might be doing wrong.</p>
  
  <p>The app looks like below  </p>
  
  <p><strong>Level1</strong><br>
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong>Header1</strong>   Header2   Header3<br>
   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This is Level1/Header1<br>
  Level2<br>
  Level3  </p>
  
  <p>The Routes that I have defined are as follows:</p>
  
  <pre><code>&lt;Route path="/" component={App}&gt;
    &lt;Route path="Level1" component={Level1}&gt;
      &lt;Route path="Header1" component={Page1}/&gt;
      &lt;Route path="Header2" component={Page2}/&gt;
      &lt;Route path="Header3" component={Page3}/&gt;
    &lt;/Route&gt;
    &lt;Route path="Level2" component={Level2}/&gt;
    &lt;Route path="Level3" component={Level3}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>The code for the SideBar component is :</p>
  
  <pre><code>export default class SideBar extends React.Component{
    render(){
      return (
        &lt;nav className="nav navbar-default"&gt;
            &lt;ul className="nav nav-pills nav-stacked" &gt;
              &lt;li&gt;&lt;Link activeClassName="active" to="/Level1"&gt;Level1&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link activeClassName="active" to="/Level2"&gt;Level2&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link activeClassName="active" to="/Level3"&gt;Level3&lt;/Link&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
      );
    }
  }
  </code></pre>
  
  <p>The code for the header component is :</p>
  
  <pre><code>export default class Header extends React.Component{
    render() {
      return (
        &lt;div&gt;
          &lt;nav className="navbar navbar-default"&gt;
        &lt;ul className="nav navbar-nav"&gt;
          &lt;li &gt;&lt;Link activeClassName="active" to="/Level1/Header1"&gt;Header1&lt;/Link&gt;&lt;/li&gt;
          &lt;li &gt;&lt;Link activeClassName="active" to="/Level1/Header2"&gt;Header2&lt;/Link&gt;&lt;/li&gt;
          &lt;li &gt;&lt;Link activeClassName="active" to="/Level1/Header3"&gt;Header3&lt;/Link&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The Level1 component is the where the header is used as follows:</p>
  
  <pre><code>export default class Level1 extends React.Component{
  
          render(){
              return(
                  &lt;div &gt;
                      &lt;Header/&gt;
                      {this.props.children}
                  &lt;/div&gt;
                  );
          }
      }
  </code></pre>