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

[Tin Nguyen]

I've built a Forge app following this tutorial for routing:
https://developer.atlassian.com/platform/forge/add-routing-to-a-full-page-app/

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() like this.
   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.