Skip to content

useBlocker doesn’t block backward navigation after hard reload (when history.state.idx is 0 or 1) #13786

Open
@cbh6

Description

@cbh6

I'm using React Router as a...

library

Reproduction

You can reproduce the issue using the official example in this repo:

⚠️ For reliable reproduction, it’s best to open the StackBlitz demo in a new browser tab and use a forced reload (Shift + Cmd + R on macOS or Ctrl + Shift + R on Windows).

Broken Flow 1
1. Go to the root (/) of the demo
2. Perform a hard reload
3. Click on the /three link (which has a blocker)
4. Fill out the form (to trigger the blocking condition)
5. Click the back button in the browser
➡️ Navigation is not blocked

At this point, window.history.state.idx is 1.

Broken Flow 2
1. Open the demo directly on /three
2. Perform a hard reload
3. Fill out the form
4. Click the back button in the browser
➡️ Navigation is not blocked

Here, window.history.state.idx is 0.

Working Flow (for comparison)
1. Go to the root (/)
2. Perform a hard reload
3. Navigate to a non-blocked route (e.g. /four)
4. Then navigate to /three
5. Click the back button in the browser
✅ Navigation is blocked as expected

At this point, window.history.state.idx is 2.


Additional Info
• This issue occurs consistently and seems tied to the history.state.idx value after a hard reload.
• The problem affects both navigation via the browser back button and programmatic navigate(-1) calls.

Custom StackBlitz fork (using v7.6.1) where the issue also reproduces:
https://stackblitz.com/edit/github-p3rdpa3z?file=src%2Fapp.tsx

System Info

System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M4 Pro
    Memory: 149.72 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.16.0 - ~/.nvm/versions/node/v22.16.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.16.0/bin/npm
  Browsers:
    Chrome: 137.0.7151.69
    Safari: 18.5

Used Package Manager

yarn

Expected Behavior

useBlocker should block the navigation consistently, even after a hard reload, and even when history.state.idx is 0 or 1.

Actual Behavior

After a hard reload, if the history index is 0 or 1 , backward navigation is not being blocked by useBlocker.

I've also recorded some of the broken flows

Full flow (blocking correctly at first and being broken after that)
https://github.com/user-attachments/assets/ef5f55c0-636a-4567-9110-b3ba9e21d686

Hard reloading and not blocking
https://github.com/user-attachments/assets/4a84a32d-959e-4180-8b10-98d3f6ded0d7
https://github.com/user-attachments/assets/ec266240-8019-4017-b80a-7cd1408d01f5

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions