📚 Reference

• 공식 문서 1

📜 Chapter

‣

next/link

useRouter

• useRouter

• Next.js에서 useRouter는 클라이언트 컴포넌트 내에서 프로그래밍 방식으로 경로(URL)를 변경하거나, 라우팅 관련 정보에 접근할 때 사용하는 가장 핵심적인 훅이다.

• Next.js의 버전에 따라 사용하는 패키지가 다르니 주의해야 한다.

• App Router 기준

  사용법

  • next/navigation에서 불러와야 하며, 반드시 'use client' 지시어가 있는 파일에서만 사용할 수 있다.

  'use client';
  
  import { useRouter } from 'next/navigation';
  
  export default function MyComponent() {
    const router = useRouter();
  
    return (
      <button onClick={() => router.push('/dashboard')}>
        대시보드로 이동
      </button>
    );
  }
  

router.push(href)

• router.push(href)
• 해당 경로로 이동한다.
• 브라우저 히스토리 스택에 추가된다.

router.replace(href)

• 현재 경로를 새 경로로 대체한다.