title: Scrolling to a component on the same page using react-router
body: <p>I've a single page react app(rather all the content is on the page), I wish to use react-router to scroll to the necessary component on the same page. 
  This is my navigation code,</p>
  
  <pre><code>class Navbar extends React.Component {
  constructor(props){
      super(props)
  
  }
  renderMain() {
      return (
          &lt;div&gt;&lt;/div&gt;
          //return home
      );
  }
  handleScroll = e =&gt; {
      e.preventDefault();
      const main = this.main.current;
      window.scrollTo({
          top: main.offsetTop,
          left: 0,
          behavior: "instant"
      });
  };
  render(){
      return (
          &lt;div className="navbar container"&gt;
              &lt;div className="logo"&gt;
                  &lt;img src={logo}&gt;&lt;/img&gt;
              &lt;/div&gt;
              &lt;BrowserRouter&gt;
                  &lt;div className="navigation"&gt;
                      &lt;ul&gt;
                          &lt;li className="listPadding"&gt;&lt;Link onClick={this.handleScroll}
                                                            to="/"
                                                            className="navLink"
                                                            activeClassName="activeRoute" /&gt;HOME&lt;/li&gt;
                          &lt;li className="listPadding"&gt;&lt;Link onClick={this.handleScroll}
                                                            to="/whats-crcl" className="navLink"
                                                            activeClassName="activeRoute"/&gt;WHAT'S CRCL?&lt;/li&gt;
                          &lt;li className="listPadding"&gt;&lt;Link onClick={this.handleScroll}
                                                            to="/founders" className="navLink"
                                                            activeClassName="activeRoute"/&gt;THE FOUNDERS&lt;/li&gt;
                          &lt;li className="listPadding"&gt;&lt;Link onClick={this.handleScroll}
                                                            to="/careers" className="navLink"
                                                            activeClassName="activeRoute"/&gt;WE'RE HIRING!&lt;/li&gt;
                          &lt;li className="button"&gt;&lt;Link to=""/&gt;READ THE BLOG&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path="/" component={() =&gt; this.renderMain()} /&gt;
                          &lt;Route exact path="/whats-crcl" render={() =&gt; Snippets} /&gt;
                          &lt;Route exact path="/the-founders" render={() =&gt; MainContent} /&gt;
                          &lt;Route exact path="/whats-crcl" render={() =&gt; Careers} /&gt;
                          &lt;Route render={() =&gt; &lt;h1&gt;Page not found&lt;/h1&gt;} /&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
  
  
          &lt;/div&gt;
      );
  
  }
  
  }
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>    .navigation {
  
        ul {
          li {
            font-family: 'Roboto', sans-serif;
            font-size: 1.2em;
            font-weight: 400;
            color: #ffffff;
            list-style: none;
            display: inline-block;
  
            a.navLink:link {
              color: #fff;
              font-size: 1.6rem;
              line-height: 1.6rem;
              text-decoration: none;
            }
            a.navLink:visited {
              color: #fff;
            }
            a.navLink:hover {
              color: #595959;
            }
  
            a.navLink:active {
              color: #595959;
            }
  
  
          }
        }
      }
  
  .activeRoute {
    background-color: yellow;
    border-bottom: 0.4rem solid teal;
    cursor: not-allowed;
  }
  </code></pre>
  
  <p>I'm new to React. My questions are:</p>
  
  <ol>
  <li>Neither does the cursor show up for the nav elements, as is the case of a regular <code>a</code> tag?</li>
  <li>This pops up the component on the page, how can I prevent that behavior and scroll down to the relevant component on the same page?</li>
  </ol>