Navigation within section of a page using react router

I have my navigation bar with following contents

+------+-------+-------+
| Home | About | Login |
+------+-------+-------+

Home is vertically scroll-able page with multiple sections (e.g #About and other sections) While login is separate react component which gets rendered on /login route.

Here is my route.js file

<Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/login" component={Login}/>
</Route>

My question is how should I handle navigational changes within page sections?

Currently I am doing it like this:

<li>
    <Link to="/#about-us">About</Link>
</li>

and About section within home page is

<div id="about-us">
    About us
</div>

Problem with this approach is when I am at login page(/login) and click on About section link (/#about-us) of Home page nothing happens!

Edit: I am using react-routerV2