Scrolling to a component on the same page using react-router

Question

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,

class Navbar extends React.Component {
constructor(props){
    super(props)

}
renderMain() {
    return (
        <div></div>
        //return home
    );
}
handleScroll = e => {
    e.preventDefault();
    const main = this.main.current;
    window.scrollTo({
        top: main.offsetTop,
        left: 0,
        behavior: "instant"
    });
};
render(){
    return (
        <div className="navbar container">
            <div className="logo">
                <img src={logo}></img>
            </div>
            <BrowserRouter>
                <div className="navigation">
                    <ul>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/"
                                                          className="navLink"
                                                          activeClassName="activeRoute" />HOME</li>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/whats-crcl" className="navLink"
                                                          activeClassName="activeRoute"/>WHAT'S CRCL?</li>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/founders" className="navLink"
                                                          activeClassName="activeRoute"/>THE FOUNDERS</li>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/careers" className="navLink"
                                                          activeClassName="activeRoute"/>WE'RE HIRING!</li>
                        <li className="button"><Link to=""/>READ THE BLOG</li>
                    </ul>
                    <Switch>
                        <Route exact path="/" component={() => this.renderMain()} />
                        <Route exact path="/whats-crcl" render={() => Snippets} />
                        <Route exact path="/the-founders" render={() => MainContent} />
                        <Route exact path="/whats-crcl" render={() => Careers} />
                        <Route render={() => <h1>Page not found</h1>} />
                    </Switch>
                </div>
            </BrowserRouter>


        </div>
    );

}

}

This is my CSS:

    .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;
}

I'm new to React. My questions are:

1. Neither does the cursor show up for the nav elements, as is the case of a regular a tag?
2. 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?

Solution 1

This can be attained using this react-scroll.

I am putting the important code snippet here. Details usage is at here.

In navigation component.

...
import { Link } from 'react-scroll';

...
<ul>
  <li className="listPadding">
    <Link onClick={this.handleScroll}
        to="about"
        activeClass="active"
        spy={true} 
        smooth={true}
    >
        ABOUT
    </Link>
  </li>
</ul>

And the about component needs to have the unique id about. The snippet looks like this.

const About = () => {
   return (
      <div id="about">
        ...
      </div>
   );
}

Solution 2

There are solution for your case on official react-router doc.

You should use HashLink to scroll to element with react router.

Comments

[PrincAm]

It will not change the route

[Sean]

Brilliant. Was looking for something that was going to work out of the box. Thanks!