[Next.js] useRouter

페이지 이동하는 방법으로 Link말고 useRouter를 쓰는방법도 있다

useRouter는 client component에서 사용할수있다.

 

import { useRouter } from "next/navigation";

let router = useRouter();

 

리액트에서 navigate쓰던거랑 방법이 비슷한것 같다.

 

"use client";

import { useRouter } from "next/navigation";

export default function DetailLink() {
  let router = useRouter();

  return (
    <button
      onClick={() => {
        router.push("/list");
      }}
    >
      버튼
    </button>
  );
}

 

router.back()   : 뒤로가기

router.forward()   : 앞으로가기

router.refresh()     : 새로고침(바뀐내용만)

 

router.prefetch()   : 페이지 미리로드