No support for scrolling to an ID

[regex5440]

I'm using React Router as a...

library

Reproduction

Default Behavior that scrolls to an element with id=section2:

• <a href="#section2">Scroll to Section 2</a>
• window.location.assign("#section2")
• window.location.replace("#section2")

React Router methods that does not scroll the page to element with id=section2:

• <Link to="#section2">Scroll to Section 2<Link> //Does not mimic the natural behavior like anchor <a/> tag
• <NavLink to="#section2">Scroll</NavLink> //Does not mimic the natural behavior like anchor <a/> tag

• const navigate = useNavigate();             //Does not mimic the natural behavior like window.location.assign
  navigate("#section2");
  

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz
    Memory: 5.56 GB / 15.91 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\node_modules\.bin\yarn.CMD
    npm: 8.12.1 - ~\node_modules\.bin\npm.CMD
    pnpm: 9.4.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (131.0.2903.70)
    Internet Explorer: 11.0.26100.1882

Used Package Manager

npm

Expected Behavior

All of the following should scroll to the element with id="section":

• <Link to="#section">Scroll</Link>
• <NavLink to="#section">Scroll</NavLink>

• const navigate = useNavigate();
  navigate("#section");
  

Actual Behavior

<Link /> and <NavLink /> are not scrolling the page. Rather they treat this argument: #section2 as an absolute path and compile to <a href="/#section2"> that prevents the default behavior of anchor tag, that is to scroll the page to element with id=section2.

Similarly, navigate(#section2) is also not scrolling the page and leaving the page as it is.

[regex5440]

If this behavior is considered as valid bug, please assign it to me.

[timdorr]

I believe you also need to use the <ScrollRestoration/> component to enable the Links to scroll to IDs in the document.