I need multiple nested routes in react-router-dom

I am using v4 of react-router-dom

I've got my

import { BrowserRouter as Router, Route } from 'react-router-dom';

and I need the components to render like so

--- Login

--- Home

    --- Page 1

    --- Page 2

    --- Page 3

--- About

--- etc

The Home component contains a Header component that is common to Page1, Page2, and, Page3 components, but is not present in Login and About.

My js code reads like so

<Router>

    <div>

        <Route path='/login' component={Login} />

        <Home>

            <Route path='/page1' component={Page1} />

            <Route path='/page2' component={Page2} />

            <Route path='/page3' component={Page3} />

        </Home>

        <Route path='/about' component={About} />

    </div>

</Router>

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.

What I get instead is the Login component rendered and below that Page1's component is rendered.

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.