prompt or block navigation?

[thom-nic]

Would it be possible to implement something similar to react-router's Prompt in wouter? I'm just getting started migrating from react-router to wouter but this is a feature we use in r-r.

ex: https://v5.reactrouter.com/core/api/Prompt

[molefrog]

Hi! It's not supported atm, but here is a short example of how it can be achieved:
https://codesandbox.io/s/wouter-interruptible-transition-using-router-6o7lx?file=/src/index.js

The beauty of wouter is interchangeable location hook, and it is an extension point to cover a lot of use cases similar to this one.

[pastelmind]

Unfortunately, this does not prevent the user from leaving the page via the browser back/forward buttons. Implementing this seems complicated; we would have to...

1. Listen to the popstate event
2. Find and restore the previous position in the history stack while processing the blocker
3. Retry the back/forward navigation if/when the app allows it

See: React Router docs on useBlocker()

Note that TanStack Router appears to have "given up" on blocking the back/forward buttons:

What about the back button?

The back button is a special case. When the user clicks the back button, we cannot intercept or control the browser's behavior in a reliable way, and there is no official way to block it that works across all browsers equally. If you encounter a situation where you need to block the back button, it's recommended to rethink your UI/UX to avoid the back button being destructive to any unsaved user data. Saving data to session storage and restoring it if the user returns to the page is a safe and reliable pattern.

[molefrog]

You are correct. There is an issue opened where we discuss this feature. #452

I think that the missing piece is the an API to intercept location changes.