[Next.js] next router

참고

router.push

사용법

  • url: UrlObject | String - 이동하고자 하는URL
  • as: UrlObject | String - (Optional) path에 대한 decorator
  • options: object - (Optional) 아래 설정 가능
  • scroll: boolean - 페이지 이동 후 스크롤을 가장 위로 올릴 지를 설정 (Default: true)
  • shallow: boolean - getStaticProps, getServerSideProps, getInitialProps를 재실행 하지 않고 페이지를 업데이트
  • locale: string - 새로운 페이지의 locale을 지정
router.push(url, as, options)

UrlObject

{
  auth?: string | null | undefined;
  hash?: string | null | undefined;
  host?: string | null | undefined;
  hostname?: string | null | undefined;
  href?: string | null | undefined;
  pathname?: string | null | undefined;
  protocol?: string | null | undefined;
  search?: string | null | undefined;
  slashes?: boolean | null | undefined;
  port?: string | number | null | undefined;
  query?: string | null | ParsedUrlQueryInput | undefined;
}

예시

  • 버튼을 누르면 /tree.tsx(jsx) 또는 /tree/index.tsx(jsx) 파일로 라우팅
  • URL은 /hierarchy
  • 스크롤은 버튼을 눌렀을 때의 스크롤을 유지한다.
import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/tree', 'hierarchy', { scroll: false })}>
      Click me
    </button>
  )
}

router.replace

지정한 path로 이동하지만 history 스택에 새로운 URL entry를 추가하지 않는다.

사용법

react.push와 동일

router.replace(url, as, options)

예시

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.replace('/home')}>
      Click me
    </button>
  )
}

links

social