Next.js useRouter 정리

router 객체 요소

router를 콘솔로 찍어보면 아래와 같은 객체요소들이 있다

 

asPath - string - basePath 또는 locale 없이 브라우저에 표시되는 경로 (쿼리포함)
basePath - string - 활성 basePath (활성화 된 경우)
defaultLocale - string - 현재 기본 locale (활성화 된 경우)
isFallback - boolean - 현재 페이지가 fallback 모드인지 여부
isPreview - boolean - 앱이 현재 미리보기 모드인지 여부
isReady - boolean - 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부. useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는 데에 사용해야한다.
locale - string - 활성 로케일 (활성화 된 경우)
locales - string[] - 지원되는 모든 로케일 (활성화 된 경우)
pathname - string - 현재 경로. 이는 /pages 의 페이지 경로이며(파일명) 구성된 basePath 또는 locale 은 포함되지 않는다.
query - object - 객체로 구문 분석 된 쿼리 문자열. 페이지에 데이터 가져오기 요구사항이 없는 경우 사전 렌더링 중에 빈 객체가 된다. 기본값은 {}
⇒ 동적 라우팅 사용시 쿼리값이 객체로 들어감.

 

router.push

히스토리 스택에 새로운 url을 쌓아주며 이동

 

사용법:

router.push(url, ad, options)

- url*: 라우팅 하려는 url

- as: 브라우저 url바에 보여지는 path

- options: scroll(라우팅 후 스크롤업), shallow(새로고침하지 않고 라우팅 주소만 변경), locale(선택적 문자열은 새 페이지의 로케일을 나타냄) 등이 있음

 

쿼리를 이용하는 경우 예시:

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <button
      type="button"
      onClick={() => {
        router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
          },
		  "/order"
        )
      }}
    >
      Click here to read more
    </button>
  )
}

 

router.push는 외부 url 사용시에는 적합하지 않음, a tag의 target="_blank"나 window.location등을 사용하는 것이 좋음

router.replace

router.push와 비슷하게 동작하지만 히스토리 스택을 쌓지 않음

기존에 있던 현재 페이지 route를 새로운 url로 대처

 

사용법:

router.push와 동일

 

router.back

히스토리에서 전단계로 이동, 뒤로가기

 

router.reload

현재 url을 다시 로드, 새로고침 window.location.reload()와 같음

 

router.events

라우터 내부에서 발생하는 다양한 이벤트들을 실행

지원되는 이벤트 목록:

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

Functions: useRouter | Next.js