How to Implement Vertical Scrolling in React Using react-router-hash-link

How To Deploy a React Application with Nginx on Ubuntu 20.04

Smooth scrolling is a feature that makes webpages more usable and allows for a better user scrolling experience in most browsers.

Implementing a smooth page scroll while using react-router-dom has been a problem in React.js. So this article, you are going to learn how to implement smooth vertical scrolling using the react-router-hash-link package.

What is react-router-hash-link?

According to its docs, react-router-hash-link is a solution to React Router's issue of not scrolling to #hash-fragments when using link components to navigate.

Prerequisites.

You must use BrowserRouter from react-router-dom for react-router-hash-link smooth scrolling to work. To install and use react-router, enter the following command:

npm i react-router-dom 

Or for yarn:

yarn add react-router-dom 

To understand how to implement vertical scrolling, you will be building a simple landing page with a navbar and three sections.

How to Use react-router-hash-link

Step 1: Install react-router-hash-link

To install the react-router-hash-link package, run the following command:

npm install --save react-router-hash-link

Or with yarn:

yarn add react-router-hash-link

Step 2: Import the react-router-hash-link package into your React app.

Open your LandingPage.js file and import hashlink from your react-router-hash-link package.

Step 3: Add the Hashlink component to point to different areas of your app

Add the Hashlink component to your LandingPage.js file like this:

Step 4: Add the ID of your Hashlink to any element.

When you click on the link with your id, a scroll effect will be implemented. You will see a scroll to the element or the page that has an id that matches the #hashfragment in the link.

And there you have it! You've now implemented smooth scrolling on a simple webpage.

Conclusion

React-router-hash-link allows you to leverage smooth scrolling seamlessly while using react-router-dom for routing.

It has a lot of functions including Scroll to top and Scroll with offset functions, so you can explore what else it can do.