In-Page Navigation Tutorial in React

Here we are going to have a look that how we can make links to navigate the different pages of the same website.

In order to do that we need to install two packages react-router-dom and react-router-hash-link.

yarn add react-router-dom react-router-hash-link

Here we have About, Our products, and Services so will create a link to the services section only.

Move to your App.js.

Line 6 imported Browser Router.

Line 10 to 30 wrapped every thing inside Browser Router.

Now move to Services.js.

Line 2 Provided an ID service.

Move to your App.js.

Line 7 imported Hashlink as link.

Line 18 to 20 created a hash link to the section with ID - service

Now move to browser.

Got a link to services once you click it will take you to the services page.

If you click it will suddenly take you to that section now we make some changes to make the scroll smooth.

Line 18 added keyword smooth this will do the job.