title: Navigation within section of a page using react router
body: <p>I have my navigation bar with following contents</p>
  
  <pre><code>+------+-------+-------+
  | Home | About | Login |
  +------+-------+-------+
  </code></pre>
  
  <p>Home is <strong>vertically scroll-able page with multiple sections</strong> (e.g <code>#About</code> and other sections) While login is separate react component which gets rendered on <code>/login</code> route.</p>
  
  <p>Here is my <code>route.js</code> file</p>
  
  <pre><code>&lt;Route path="/" component={App}&gt;
      &lt;IndexRoute component={Home}/&gt;
      &lt;Route path="/login" component={Login}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>My question is how should I handle navigational changes within page sections?</p>
  
  <p>Currently I am doing it like this:</p>
  
  <pre><code>&lt;li&gt;
      &lt;Link to="/#about-us"&gt;About&lt;/Link&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and <strong>About</strong> section within <strong>home</strong> page is </p>
  
  <pre><code>&lt;div id="about-us"&gt;
      About us
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem with this approach is when I am at login page(<code>/login</code>) and click on About section link (<code>/#about-us</code>) of Home page nothing happens!</p>
  
  <p><strong>Edit:</strong>
  I am using <strong>react-routerV2</strong></p>