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)
}
}, [])