Description
I'm using React Router as a...
library
Reproduction
You can reproduce the issue using the official example in this repo:
- https://github.com/remix-run/react-router/tree/main/examples/navigation-blocking
- StackBlitz link:
https://stackblitz.com/github/remix-run/react-router/tree/main/examples/navigation-blocking?file=README.md
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