Q18: How do you listen to route navigation events using useRouter?
router.events allows subscribing to route change events like routeChangeStart, routeChangeComplete, and routeChangeError. Commonly used to display global loading progress bars (e.g. NProgress).
Subscribing to Route Events
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export default function App({ Component, pageProps }) {
const router = useRouter();
useEffect(() => {
const handleStart = (url) => console.log(`Navigating to: ${url}`);
router.events.on('routeChangeStart', handleStart);
return () => router.events.off('routeChangeStart', handleStart);
}, [router]);
return <Component {...pageProps} />;
}💡 Listens for navigation initialization and cleans up event handlers on unmount.
Key Takeaways
- Subscribe via
router.events.on(eventName, handler)insideuseEffect. - Clean up listeners using
router.events.off().
Knowledge Check
Which router event fires immediately when a client-side route transition is triggered?