Next.js13 useRouter() 란

useRouter()란 ?

useRouter 훅을 사용하면 함수형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리
클라이언트 컴포넌트 내에서만 사용할 수 있으며, next/navigation 에서 import 한다.

router.push

router.push(URL) : 해당 URL로 이동한다.

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

router.replace(URL1, URL2)

router.replace(URL1, URL2) : URL1으로 이동후, URL2로 주소만 변경한다.

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

router.refresh()

router.refresh() : 현재 경로를 새로고침한다.

아래와 같이 서버에 새 요청을 보내고,
데이터 요청을 다시 가져와 서버 구성 요소를 다시 렌더링할 때 사용한다.

const CreatePost = () => {
  const [title, setTitle] = useState("");
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await fetch("http:...", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title }),
    });
    setTitle("");
    router.refresh();
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <button type="submit">Create Post</button>
      </form>
    </>
  );
};

export default CreatePost;