How to use anchors with React Router?

Sometimes, we want to use anchors with React Router

In this article, we’ll look at how to use anchors with React Router.

To use anchors with React Router, we can use the react-router-hash-link package.

To install it, we run

npm install react-router-hash-link

Then we use it by writing

import { HashLink as Link } from "react-router-hash-link";

//...

<Link to="home-page#section-three">Section three</Link>;

to add the HashLink component and set its to prop to a URL with the ID of the element to scroll to after the hash.

To use anchors with React Router, we can use the react-router-hash-link package.