next js 13 router.events how to do it?

[0xMALVEE]

how to do it in next js 13

const router = useRouter();
    
// detect route change with router events
const [startCount, setStartCount] = useState(0);
const [completeCount, setCompleteCount] = useState(0);
useEffect(() => {
    // subscribe to routeChangeStart event
    const incrementStartCount = (url) => {
        setStartCount(x => x + 1);
        console.log('routeChangeStart', url);
    };
    router.events.on('routeChangeStart', incrementStartCount);

    // subscribe to routeChangeComplete event
    const incrementCompleteCount = (url) => {
        setCompleteCount(x => x + 1);
        console.log('routeChangeComplete', url);
    };
    router.events.on('routeChangeComplete', incrementCompleteCount);

    // unsubscribe on component destroy in useEffect return function
    return () => {
        router.events.off('routeChangeStart', incrementStartCount);
        router.events.off('routeChangeComplete', incrementCompleteCount);
    }
}, []);

[SalahAdDin]

Same question here, We need to close a menu when the user has navigated to another router, but there is no easy way to do it.

[jwentling78]

Also looking for an answer to this, though I think the answer is that we can't yet for the app router.

I want the router.events function with the routeChangeStart ability available in the app router. I went ahead and use the app router without looking this far into it and I feel stuck now :[

Does someone from Vercel have a workaround or a timeline on when this (hopefully) is going to be added?

[SalahAdDin]

Solved by using a hook that checks if the current path is the same as the old path, it is in another discussion, I don't remember which one.

[IbexID]

I wrote a workaround for this.

Created an event emitter and wrapped it in a hook:

// hooks/useOnRouteChange.ts
import EventEmitter from "events";
import { usePathname } from "next/navigation";
import { useEffect } from "react";

const emitter = new EventEmitter();
export const useOnRouteChange = (cb: () => void) => {
  const url = usePathname();

  useEffect(() => {
    emitter.once("routeChange", cb);
  }, [cb]);

  useEffect(() => {
    emitter.emit("routeChange");
  }, [url]);
  return emitter;
};

and then use it like this in a component:

export const MobileMenu: FC<IMobileMenu> = () => {
  const [isOpen, setIsOpen] = useState(false);
  useOnRouteChange(() => setIsOpen(false))
  return (
    ...
  )
}