Route cancellation

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

A method in router API that allows aborting upcoming route change.

Current Behavior

Right now router exposes abortComponentLoad method but it seems to be designed only for internal use and it doesn’t work if it’s called in routeChangeStart handler. It works only after this piece of code was executed:

async fetchComponent (route, as) {
  let cancelled = false
  const cancel = this.componentLoadCancel = function () {
    cancelled = true
  }

Workaround:

Router.ready(() => {
  Router.router.on('routeChangeStart', () => {
    setTimeout(() => {
      Router.router.abortComponentLoad();
    });
  });
});

Context

This is useful for example when building complex forms and we want to warn a user before he leaves the page without submitting.

Your Environment

ANY

[lcswillems]

Even with this, I can’t get your code working. But, I found another way to do it that works for me:

const routeChangeStart = url => {
  if (Router.asPath !== url && unsavedChanges && !confirm(message)) {
    Router.events.emit('routeChangeError');
    Router.replace(Router, Router.asPath, { swallow: true });
    throw 'Abort route change. Please ignore this error.';
  }
};

The full code in TypeScript (I rewrote @Betree solution with hooks and by removing intl, etc…):

import { useEffect } from 'react';
import Router from 'next/router';

export const useWarnIfUnsavedChanges(unsavedChanges: boolean) => {
  const message = 'Do you want to leave?';

  useEffect(() => {
    const routeChangeStart = url => {
      if (Router.asPath !== url && unsavedChanges && !confirm(message)) {
        Router.events.emit('routeChangeError');
        Router.replace(Router, Router.asPath);
        throw 'Abort route change. Please ignore this error.';
      }
    };

    const beforeunload = e => {
      if (unsavedChanges) {
        e.preventDefault();
        e.returnValue = message;
        return message;
      }
    };

    window.addEventListener('beforeunload', beforeunload);
    Router.events.on('routeChangeStart', routeChangeStart);

    return () => {
      window.removeEventListener('beforeunload', beforeunload);
      Router.events.off('routeChangeStart', routeChangeStart);
    };
  }, [unsavedChanges]);
};

then add:

useWarnIfUnsavedChanges(unsavedChanges)

at the beginning of your page/component.

Please, let me know if there is any issue with my code or if you see how to improve it.

[davidalejandroaguilar]

I wonder if we’ll ever have an official API for this, it’s been almost 4 years.