Allow imperative navigations to ignore blocker

[dd-jonas]

Hi there

I'm loving the unstable_useBlocker API. I've built a reusable Blocker component which uses this hook and shows a modal when open. I'm currently using it in a large form, with the block state being based on React Hook Form's isDirty prop. Additionally, I'm using Tanstack Query to trigger a mutation on submit, which redirects on success.

Now the issue: the Blocker blocks the redirect.
The blocker seems to unblock in the next render cycle (e.g. when using React Hook Form's reset to un-dirty the form), and there's no real way to circumvent this. The best solution as of now is to accept this behavior and redirect in the next render cycle with a useEffect.

As blockers are usually shown when the user leaves a page, I think it would make sense for the developer to have controller whether they want to use the blocker as well. Something like navigate('/dashboard', { blockable: false }), which would then get ignored by the blocker.

Thoughts?

[brophdawg11]

The blocker function receives the current/next locations as arguments, so as a workaround, could you add a query string to your redirect location and then use nextLocation to determine not to block?

// Assuming you redirect to /dashboard?success=true
let shouldBlock = React.useCallback(({ nextLocation }) => {
  return isDirty && nextLocation.search !== "?success=true";
}, [isDirty]);
let blocker = unstable_useBlocker(shouldBlock);

[dd-jonas]

Thanks for the suggestion! I would use location state though in this case as this does not really belong in the URL.
I understand adding a native option to navigate would pollute the API though for this specific use case, so I can live with this workaround.