[Bug]: Wrong id is used when trying to scroll to anchor if id contains %20

[istarkov]

What version of React Router are you using?

6.10.0

Steps to Reproduce

Example app.
https://codesandbox.io/s/crimson-cdn-n3gpdq?file=/src/App.js

Create broserRouter and following route

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

export default function App() {
  return (
    <>
      <ScrollRestoration />
      <div className="App">
        <Link to="/#hello%2520%20world">
          MUST WORK AND SCROLL TO BOTTOM, BUT WORKS ONLY WITH JS DISABLED OR ON
          REFRESH. CLICK ME AND REFRESH.
        </Link>
        <div style={{ height: "3000px" }}></div>
        <Link id={"hello%20 world"}>Link</Link>
      </div>
    </>
  );
}

With disabled js first links work, and scrolls to bottom. With refresh too.
With enabled js not.

The issue is here

react-router/packages/react-router-dom/index.tsx

Line 1300 in bc25528

let el = document.getElementById(location.hash.slice(1));

Must be

decodeURIComponent(location.hash.slice(1))

Expected Behavior

Should work even with js enabled

Actual Behavior

Work only if js disabled.

[brophdawg11]

This is fixed by #10682 and should be available in the next release.

[github-actions]

🤖 Hello there,

We just published version 6.14.2-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.14.2 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!