How can we handle router Prompt before navigation to different path?

[ThaDeveloper]

Something similar to this https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Prompt.md.
The need for the user to confirm before going back the page or clicking a different route if they have unsaved changes.

Currently, this is not possible as it returns Error: Invariant failed: You should not use <Prompt> outside a <Router>

[alexdunne]

@ThaDeveloper

It looks as though Prompt or something similar isn't planned/intended to be added to reach-router.

https://reach.tech/router/credits

Trade-offs (mostly compared to React Router)

No history blocking. I found that the only use-case I had was preventing the user from navigating away from a half-filled out form. Not only is it pretty easy to just save the form state to session storage and bring it back when they return, but history blocking doesn’t happen when you navigate away from the app (say to another domain). This kept me from actually using history blocking and always opting to save the form state to session storage.

[alsan1997]

i think this should be the workaround

import { useLocation, globalHistory, useNavigate } from '@reach/router'

  const curLocation = useLocation()
  const navigate = useNavigate();
  useEffect(() => {
    return globalHistory.listen(({ action, location }) => {
      if ((action === 'PUSH' && !location.pathname.includes('${your_current_path}'))|| action === 'POP') {
        if(!window.confirm("Are you sure you want to exit video screening?")){
          navigate(`${curLocation.pathname}`)
        }
      }
    
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

[EmmanuelMr18]

With what actions will be 'PUSH' and when it will be 'POP'. Or where can I read about how action works?