DEV Community

hrb11182
hrb11182

Posted on • Updated on

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, Services so will create a link to the services section.

Move to your App.js.

Image

Line 6 imported Browser Router.

Line 10 to 30 wrapped every thing inside Browser Router.

Now move to Services.js.

Image

Line 2 Provided an ID service.

Move to your App.js.

Image

Line 7 imported Hashlink as link.

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

Now move to browser.

Image

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

Image

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

Image

Line 18 added keyword smooth.

Discussion (0)