react-router icon indicating copy to clipboard operation
react-router copied to clipboard

[Bug]: useBlocker block twice when navigating on a page using setSearchParams

Open tpoisseau opened this issue 1 year ago • 2 comments

What version of React Router are you using?

6.21.1

Steps to Reproduce

  1. a controllable shouldBlock state
  2. 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)
  3. 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,

tpoisseau avatar Dec 27 '23 13:12 tpoisseau

Any solution yet ?

Eftychiou avatar Oct 03 '25 08:10 Eftychiou

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.

tpoisseau avatar Oct 03 '25 10:10 tpoisseau