Scroll to anchor (section of page) in react-router-v6

Question

I'm trying to use the tags to scroll to a part of the page. For example:

<Link to="/#first">Go</Link>
...
<div id="first">The first section</div>

This does not seem to work with react router v6. The solutions I have found are all for previous versions of react router.

I have found that I can use reloadDocument to force the reload and that will work, but I want to implement a smooth scroll down to the element if coming from the same page. I would use refs, but I need to be able to link to these sections from other pages as well.

Answer 1

import { Link } from "react-router-dom";

const App = () => {
  return (
    <Link to={{ pathname: "/PATH_NAME", hash: "#first" }}>first</Link>
    {...}
  );
};