[Next.js] useRouter 란? / 사용법

useRouter란?

Next.js에서 함수형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리

 

자주사용하는 useRouter 기능

 

router.push(URL)

해당 URL로 이동한다.

 

router.replace(URL1, URL2)

URL1으로 이동후, URL2로 주소만 변경한다.

 

useRouter 사용법

 

1. router.push()

// next.js 프로젝트 내부

import { useRouter } from "next.router"

export default function Push(){
  // 라우터 가져오기
  const router = useRouter();
  
  // 클릭시 "/" 경로로 이동하는 버튼
  return <>
    <input type="button" onClick={() => router.push("/") } value="Push"/>
  </>
}

 

import { useRouter } from "next.router"

export default function Exam(){
  const router = useRouter();
  
  // 클릭시 "/" 경로로 이동하며, query로 url에 정보를 담아준다.
  return <>
    <input type="button" onClick={() => router.push({
      pathname: "/",
      query: {
        name: "jinho",
        age: "26"
      }
    }) } value="Push"/>
  </>
}

 

2. router.replace()

// next.js 프로젝트 내부

import { useRouter } from "next.router"

export default function Replace(){
  // 라우터 가져오기
  const router = useRouter();
  
  // 클릭시 "/" 경로로 이동하는 버튼
  return <>
    <input type="button" onClick={() => router.replace("/","/replace") } value="Push"/>
  </>
}