next/router

Next 공식문서

useRouter

• react hook 이므로 클래스에 사용할 수 없다.
• 클래스에서 사용하고 싶다면 withRouter을 사용하자.

import { useRouter } from 'next/router'
const router = useRouter()

router

• object
  • pathname: string
  • query: object
  • asPath: string
  • isFallback: boolean
  • basepath: string
  • locale: string
  • locales: string[]
  • defaultLocale: string
  • domainLocales: Array<{domain, defaultLocale, locales}>
  • isReady: boolean
  • isPreview: boolean

router.push

• 클라이언트 페이지 전환 처리. history에 새 URL 추가
• 다음 페이지로 사용자를 리디렉션한다.
• 뒤로가기가 가능하다.

• 리디렉션 : redirection, 리다이렉션. 다른 URL 페이지로 보내주기

router.replace

• router.push와 유사하지만, history에 새 URL을 추가하지 못하게 한다.
• 뒤로가기가 불가능하다.

router.prefetch

• 보다 빠른 클라이언트 전환을 위해, 페이지를 미리 가져온다.
• 주의) production 전용 기능. 개발 중인 페이지는 미리 가져오지 않는다.
• 예시) 로그인 후 대시보드로 리디렉션 할 때, 대시보드를 미리 가져와 빠르게 전환할 수 있다.

router.beforePopState

• 라우터 동작 전 작업을 하고싶을 때 사용한다.
• 예시) 특정 url로만 이동을 허용하고 싶을 때.

router.back

• 브라우저 뒤로가기를 클릭하는 것과 같다.

router.reload

• 현재 URL을 다시 로드한다.
• 브라우저 새로고침을 클릭하는 것과 같다.

router.events

• 라우터 내부에서 발생하는 다양한 이벤트를 감지하여 함수를 실행한다.

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

withRouter

• 클래스형 컴포넌트에서 사용 가능.
• match, location, history 객체에 접근할 수 있도록 해준다.