Listen to route changes in a SPA without tight coupling framework specific router implementation

[eric-burel]

Is your feature request related to a problem? Please describe.

In the SmartForm, we want to display a blocking popup "You have unsaved changes, are you sure you want to leave" on various events: closing the browser, changing route.

The problem is that "changing" route can happen at 2 levels:

• in the browser. Easy to handle
• in the SPA. That's where trouble begins.

The problem is that SPA route transition are handled by a router, which is framework specific. React Router was suffering from this limitation, and Next also suffers from it: you have to use a framework specific solution to block the route transitions.

Describe the solution you'd like

• A pattern to tell any SPA router that we want to block route transition FIRST DRAFT OK, it triggers an event. It's app/framework responsibility to listen for those block/unblock events and add relevant behaviour for their own JS router.

For instance in React Router, that means calling history.block(), in Next, adding a listener to "beforepopstate"

Demo of a generic hook: https://gist.github.com/eric-burel/75301e2ba01967e0ec909ddf7fae5100
Work ongoing there: #31

• A sample implemention with Next, in Vulcan Next TO BE DONE

Describe alternatives you've considered
It's possible to have Next specific solution but that creates a tight coupling which we refuse

Additional context

• How to intercept route changes: How to intercept route changes? vercel/next.js#12348
  https://github.com/ReactTraining/history/blob/master/docs/blocking-transitions.md
  Added beforeRouteChangeStart vercel/next.js#5377
• Offical doc for the relevant event in Next: https://nextjs.org/docs/api-reference/next/router#usage-3
• Next specific solution: Route cancellation vercel/next.js#2476 (comment)
  Browser Back Button does not trigger window.onbeforeunload vercel/next.js#2694