Multiple Nested Routes in react-router-dom v4 : <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>
