router.event_Next.js

router.event

• next/router로 이벤트를 감지해서 특정 이벤트가 발생하면 함수를 실행시킬 수 있다.

종류

routeChangeStart(url, { shallow })- 경로가 변경되기 시작할 때 발생
routeChangeComplete(url, { shallow })- 경로가 완전히 변경되면 발생
routeChangeError(err, url, { shallow })- 경로 변경 시 오류가 발생하거나 경로 로드가 취소되면 발생
err.cancelled- 탐색이 취소되었는지 여부를 나타냅니다.
beforeHistoryChange(url, { shallow })- 브라우저의 기록을 변경하기 전에 실행
hashChangeStart(url, { shallow })- 해시는 변경되지만 페이지는 변경되지 않을 때 발생
hashChangeComplete(url, { shallow })- 해시가 변경되었지만 페이지가 변경되지 않은 경우 발생

예제

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      console.log(
        `App is changing to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }

    router.events.on('routeChangeStart', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
  }, [])