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?