useBlocker on v7 Framework not working

[George-Madeley]

I have a React Router v7 Framework app (with SSR disabled). I have a react-hook-form Form on a given page. Ideally, I want to block the user from navigating away when any part of the form is dirty. I thought the solution below would be simple enough:

  const blocker = useBlocker(() => form.formState.isDirty);

  useEffect(() => {
    console.log(blocker.state);
    // resolve block state with dialog...
  }, [blocker.state]);

But for some reason, the blocker never blocks. I've also tried useBeforeUnload() hook and the actual beforeUnload window event but they also do not work. I understand the useBlocker is used for internal navigation with <Link /> and navigate() whilst beforeUnload if for page reloads, navigate backwards and forwards etc., So surely the solution above should work?

This did work on v6 Data Router before migrating to v7 Framework. I thought that the reason would be because useBlocker is not available on the framework router but the docs just state that the:

Allow the application to block navigations within the SPA...

I thought that by setting ssr: false, in the react-router.config.ts file would solve this as:

When using React Router as a framework, you can enable "SPA Mode" by setting ssr:false in your react-router.config.ts file.

But this does not seem to be the case.

Has anyone else had any issues with useBlocker in React Router v7 Framework SPA? If so, how did you resolve the issue?

[sunnypatell]

@George-Madeley the issue is almost certainly a stale closure. useBlocker internally wraps your callback in a useCallback with [shouldBlock] as a dependency (hooks.tsx:1838). when you pass an inline arrow that reads form.formState.isDirty, react-hook-form's formState is a proxy object that doesn't trigger re-renders the way useBlocker expects, so the registered blocker function closes over a stale isDirty === false.

fix: extract the dirty state into react state and wrap in useCallback:

const { formState: { isDirty } } = form;

const shouldBlock = useCallback<BlockerFunction>(
  ({ currentLocation, nextLocation }) =>
    isDirty && currentLocation.pathname !== nextLocation.pathname,
  [isDirty]
);

const blocker = useBlocker(shouldBlock);

the pathname check prevents blocking same-page navigations (hash changes, search params). and make sure you're navigating via <Link> or useNavigate(), not <a href>. useBlocker only intercepts router-managed navigations. for hard reloads/tab closes, you still need useBeforeUnload separately.

the navigation blocking guide and the design decision doc cover the edge cases in detail. also note: only one blocker can be active at a time per the current implementation.