Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

router.events.emit('routeChangeError'); is not working

See original GitHub issue

"next": "12.0.10",
"nextjs-progressbar": "^0.0.13",

// app.tsx

...
<NextNProgress stopDelayMs={0} options={{ showSpinner: false }} />

// form guard

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

export const useFormGuard = (isDirty: boolean) => {
  const router = useRouter();
  const message = 'ok?';

  const pageChangeHandler = () => {
    const answer = window.confirm(message);
    if (!answer) {
      // crash here
      router.events.emit('routeChangeError');
      // throw 'routeChange aborted.';
    }
  };

  const beforeUnloadhandler = (event: BeforeUnloadEvent) => {
    event.preventDefault();
    event.returnValue = message;
  };

  useEffect(() => {
    if (isDirty) {
      router.events.on('routeChangeStart', pageChangeHandler);
      window.addEventListener('beforeunload', beforeUnloadhandler);
      return () => {
        router.events.off('routeChangeStart', pageChangeHandler);
        window.removeEventListener('beforeunload', beforeUnloadhandler);
      };
    }
  }, [isDirty, router]);
};

Issue Analytics

State:
Created 2 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

2reactions

nino-castcommented, Mar 8, 2022

@imranbarbhuiya solved. Thank you for your kind answer!

2reactions

imranbarbhuiyacommented, Mar 8, 2022

this can help maybe

const pageChangeHandler = (
    url: string,
    { shallow }: { shallow: boolean }
  ) => {
    if (!shallow) {
      const answer = window.confirm(message);
      if (!answer) {
        router.events.emit('routeChangeError','routeChange aborted.', url, {shallow});
        throw 'routeChange aborted.';
      }
    }
  };

Top Results From Across the Web

Next/Router emit events · Discussion #34071 - GitHub

To do this, I want to emit a router event when a route change has been cancelled. However, router.events.emit('routeChangeStart') causes a a type...

Next/Router emit events - Stack Overflow

To do this, I want to emit a router event when a route change has been cancelled. However, router.events.emit('routeChangeStart') causes a a ...

Understanding Next.js routeChangeStart and router events

In this article, we are going to take a look at the routeChangeStart event as well as the other router events in Next.js....

next/router | Next.js

Router events should be registered when a component mounts (useEffect or componentDidMount / componentWillUnmount) or imperatively when an event happens. If a ...

Layout issue when pushing a route in Next.js

the header shows fine, but when the router pushes to the next route, ... routeChangeComplete) router.events.on('routeChangeError', ...