How to block navigation in Forge app when form is dirty using React Router

Forge Forge UI Kit and Custom UI
,
1

I’ve built a Forge app following this tutorial for routing:

Routing works as expected. However, I’m facing a problem when trying to prevent navigation if a form has unsaved changes (i.e., the form is dirty). I want to show a confirmation dialog before allowing the user to leave the current route.

Here’s what I’ve tried:

  1. useBlocker / usePrompt from react-router-dom
    These didn’t work because the Forge app doesn’t use react-router in data mode.

  2. history.block()
    I attempted to use history.block().
    However, in the Forge environment, the function passed to history.block() seems to be wrapped by crossDomainFunctionWrapper, and the blocking doesn’t work at all.

useEffect(() => {
    if (props.isDirty) {
       const unblock = history.block(() => {
          return "You have unsaved changes. Are you sure you want to leave?";
       });
       return unblock;
    }
}, [history, props.isDirty]);

Is there any reliable way to intercept or block navigation in a Forge full-page app when a form is dirty, so the user gets prompted before navigating away?

Any workaround or best practice for this in the Forge runtime would be greatly appreciated.