title: Multiple Nested Routes in react-router-dom v4
body: <p>I need multiple nested routes in react-router-dom</p>
  
  <p><strong><em>I am using v4 of react-router-dom</em></strong></p>
  
  <p>I've got my</p>
  
  <pre><code>import { BrowserRouter as Router, Route } from 'react-router-dom';
  </code></pre>
  
  <p>and I need the components to render like so</p>
  
  <pre><code>--- Login
  --- Home
      --- Page 1
      --- Page 2
      --- Page 3
  --- About
  --- etc
  </code></pre>
  
  <p>The Home component contains a Header component that is common to Page1, Page2, and, Page3 components, but is not present in Login and About.</p>
  
  <p>My js code reads like so</p>
  
  <pre><code>&lt;Router&gt;
      &lt;div&gt;
          &lt;Route path='/login' component={Login} /&gt;
          &lt;Home&gt;
              &lt;Route path='/page1' component={Page1} /&gt;
              &lt;Route path='/page2' component={Page2} /&gt;
              &lt;Route path='/page3' component={Page3} /&gt;
          &lt;/Home&gt;
          &lt;Route path='/about' component={About} /&gt;
      &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>I expect the Login component to show only on /login
  When I request for /page1, /page2, /page3, they should contain the Home component and that page's content respectively.</p>
  
  <p>What I get instead is the Login component rendered and below that Page1's component is rendered.</p>
  
  <p>I'm pretty sure that I'm missing something very trivial or making a really silly mistake somewhere, and would appreciate all the help I could get. I've been stuck with this for the last two days.</p>