Functions: useRouter

참고 사이트

“useRouter”훅은 클라이언트 컴포넌트 내에서 라우트를 프로그래밍 방식으로 변경할 수 있게 해준다.

권장사항

useRouter를 사용하는 특별한 요구사항이 없는 경우에는 네비게이션에 <Link>컴포넌트를 사용하자

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

useRouter()

browser’s history 란?

• router.push(href: string, { scroll: boolean }): 제공된 경로로 클라이언트 측 내비게이션을 수행합니다. 브라우저의 히스토리 스택에 새 항목을 추가합니다.

• router.replace(href: string, { scroll: boolean }): 브라우저의 히스토리 스택에 새 항목을 추가하지 않고, 제공된 경로로 클라이언트 측 내비게이션을 수행합니다.

• router.refresh(): 현재 경로를 새로고침합니다. 서버에 새로운 요청을 보내고 데이터 요청을 다시 가져와서 서버 컴포넌트를 다시 렌더링합니다. 클라이언트는 업데이트된 React 서버 컴포넌트 페이로드를 병합하여 클라이언트 측 React(예: useState)이나 브라우저 상태(예: 스크롤 위치)가 영향을 받지 않는 상태로 유지합니다.

• router.prefetch(href: string): 클라이언트 측 전환을 위해 제공된 경로를 미리 가져옵니다.

  • prefetch

• router.back(): 브라우저의 히스토리 스택에서 이전 경로로 이동합니다.

• router.forward(): 브라우저의 히스토리 스택에서 다음 페이지로 이동합니다.

• 알아두면 좋은 점:

  • <Link> 컴포넌트는 뷰포트에 표시되는 대로 경로를 자동으로 프리페치합니다.
  • fetch 요청이 캐시되어 있는 경우 refresh()는 동일한 결과를 재현할 수 있습니다. 쿠키와 헤더와 같은 다른 동적 함수들은 응답을 변경시킬 수 있습니다.