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.

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!