[Bug]: HashRouter: browser's back button and navigate(-1) not work in some cases

[reminjp]

What version of React Router are you using?

6.7.0

Steps to Reproduce

1. Open https://codesandbox.io/s/react-router-6-7-0-hash-router-back-p0bztk
   • It uses HashRouter of [email protected].
2. Click the "Sub Page" link.
3. Press the "Back" button.

Expected Behavior

Navigates to the root page.

Actual Behavior

Doesn't navigate.
It isn't reproduced when using [email protected].

[timdorr]

Looks like #9709 is causing this, but I have no specific idea why. @chaance or @brophdawg11 might have a better idea than me.

[brophdawg11]

I think this might be a codesandbox quirk. If I copy that HashRouter example down into examples/basic in the repository and install 6.7.0 there it works as expected for me

[reminjp]

Thank you for replying. You're right! I noticed my codesandbox example doesn't reproduce the issue in local.

However, it was reproduced on my full app. (The app doesn't try to block navigation.) Perhaps other components or dependencies broke HashRouter's behavior. I'll keep investigating the causes.

[chaance]

Closing for now, but let us know if you can isolate the issue outside of the codesandbox and get us a repro to look at 👍

[shartte]

The codesandbox does reproduce this behavior for me, and we also have this in our App after updating to 6.7.

Open the codesandbox URL in a new Tab to actually reproduce it, and manually change the URL in the browser addressbar from one route to the other. Navigation will only occur on the second try, and the console will show "You are trying to block a POP navigation" on the first attempt.

In my own app, I used this to reproduce it:

const root = createRoot(document.getElementById('root')!);
root.render(
  <HashRouter>
    <Routes>
      <Route path="/a" element={<div>A</div>} />
      <Route path="/b" element={<div>B</div>} />
    </Routes>
  </HashRouter>,
);

Changing the browser address bar from /#/a to /#/b produces the console warning and blocks navigation.

[shartte]

@chaance

Steps to reproduce this in examples/basic:

• Update router in package.json to 6.7
• Replace BrowserRouter with HashRouter
• npm run dev
• Open in Browser, navigate to the Dashboard page using the in-app Dashboard link
• Manually change the URL in your browsers address bar to '/#/about' and press enter
• The dashboard page will still be shown, and the console will show the warning
  

[brophdawg11]

Thanks for the reproduction @shartte!

[brophdawg11]

This should be fixed now in 6.8.0 👍

[shartte]

Awesome, thanks!