react-router
react-router copied to clipboard
[Bug]: useBlocker block twice when navigating on a page using setSearchParams
What version of React Router are you using?
6.21.1
Steps to Reproduce
- a controllable shouldBlock state
- a page locking navigation on mount, unlocking it on dismount. It could be a form page, locking if form is dirty, unlocking when form is submit (navigate after submit)
- a page using setSearchParams on mount
I prepared a whole bug reproduction repository so feel free to use it and tweak it : https://stackblitz.com/edit/uhn4nr-react-router-useblocker-issue?file=README.md
Expected Behavior
After blocker.proceed() I expect navigating to new page without having to confirm twice, even if the page opened do a setSearchParams on mount. because on the second confirmation, my shouldBlock is false, but blocker state is blocking.
Actual Behavior
After confirming navigation (blocker.proceed()) the navigation happen. shouldBlock is false but setSearchParams is blocked, open a new confirmation modal which should be confirmed once again.
Best regards,
Any solution yet ?
I've spot this bug ~2 years ago. The only solution I had is the workaround described into the stackerblitz.
The project where we use this workaround is over (and private). For other projects we migrate to tanstack router when we need a front router.
v6 tag had been added in April but react router is v7 now so I have no idea if there any plan to fix this bug, or if it is fix without reference to this issue.
@Eftychiou you can fork my stackblitz demo to update react router and check if the bug still exists if you want.