Blocking navigation

[bs1180]

I have a Next.js app with an editor page, and would like to warn users about unsaved changes if they try and navigate away. React Router offers a handy prompt component - is there a way to achieve something similar in Next?

[arunoda]

You can use browser's inbuilt onbeforeunload event.
See: https://stackoverflow.com/questions/20853142/trying-to-detect-browser-close-event

[bs1180]

Sorry, I should have said that I've already tried that :) The following snippet works fine if a user hits back etc., but does nothing if they navigate away by clicking any links within the site.

handleWindowClose = (e) => {
    e.preventDefault();
    return e.returnValue = "You have unsaved changes - are you sure you wish to close?";
 }

  componentDidMount = () => {
    window.addEventListener("beforeunload", this.handleWindowClose);
 }

  componentWillUnmount = () => {
    if (process.browser) {
      window.removeEventListener("beforeunload", this.handleWindowClose);
    }  
 }

[arunoda]

but does nothing if they navigate away by clicking any links within the site.

Good point.
In that case, what you can do use our next/router API to implement a such functionality.
We are not directly looking to add this feature right now.
But this is something we can do in the future.

[timneutkens]

I'm willing to accept an example of this in the repo 👌

[arunoda]

Actually, we may need some core support for that as well at some point.

[liweinan0423]

I think we should be able to allow the routing to be stopped if user returns false in the callback function. such like

Router.onRouteChangeStart = () => {
  if (/*should not leave the page*/) {
    return false;
  } else {
    return true;
  }
}

Or adding another event that gets triggered before the transition starts to allow user halt the transition, e.g. Router.beforeRouteChangeStart

[arunoda]

Closing in favor of #2694