[Bug]: HashRouter URL escapes location.hash as soon as switching to React 18 createRoot while having the ClearURLs Chrome Extension enabled

[longsleep]

What version of React Router are you using?

6.3.0

Steps to Reproduce

I recently migrated an existing app which uses HashRouter to React 18. After switching the application to the new createRoot API (https://reactjs.org/link/switch-to-createroot), the URL routing stops working as something suddenly changes the location.hash value into its URL escaped value.

Messages like router.ts:11 No routes matched location "%2F_%2Foidc%2Fsilent-refresh%3F= are logged when accessing any of the existing routes.

• Load an application in a fresh window or with a browser navigation as http://localhost:8080/app/#/whatever/route with React 18 but using the old ReactDOM.render API. Ensure the browsers URL remains the same when the app loads.
• Now change the app to the new createRoot API and do the same (press browser reload). Now the URL changes tto http://localhost:8080/app/#%2Fwhatever%2Froute=.

Expected Behavior

When using React 18 with the new Client Rendering API, the URL routing should not escape the hash part.

Actual Behavior

Hash based URL routing does not work as the browsers URL hash value gets escaped.

[longsleep]

I did some debugging, and hash change is triggered when calling createHashHistory in https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L188= - since this comes from https://github.com/remix-run/history/blob/dev/packages/history/index.ts#L364= this might not actually a problem in react-router.

Minimal example:

export function App(): JSX.Element {
  const h = createBrowserHistory();
  console.log('h', h);

  return <React.Fragment>Hello World!</React.Fragment>;
}

[longsleep]

I finally found the issue. It is caused by the "ClearURLs" Chrome Extension (https://chrome.google.com/webstore/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk) - disabling this extension solves the problem. It remains unclear to me why this suddenly breaks and only when using React 18 client side rendering.

I leave it to you guys if this is something worth to investigate further. The extension source code is at https://github.com/ClearURLs/Addon/ - i will a create a ticket there too.

[timdorr]

Thanks, but we can't control extensions like that. This isn't a bug with React Router.