[Next.js] 페이지 이동하기(useRouter, Link, Cath all)

1.useRouter

• 브라우저를 라우팅 할 수 있는 Hook

import { useRouter } from "next/router";

export default function Details({ movie }) {
  const router = useRouter();

  const toAbout = () => {
    router.push(
      // url
      {
        pathname: "/details/[id]",
        query: { id: movie.id, name: movie.name },
      },
      // as (두번째 인자 (선택), 브라우저에 표시되는 주소를 따로 설정하고 싶을때 사용) 
      "/details/[id]"
    );
  };
  return (
    <div>
      <button onClick={toAbout}>About</button>
    </div>
  );
}

as 이외의 다양한 기능들이 존재한다.
router.replace : 히스토리 스택에 새로운 주소를 추가하지 않고 대체
router.prefetch : 페이지를 미리 불러옴으로써 클라이언트 측에서의 페이지 이동 속도를 향상해줌
router.back : 히스토리 스택 상의 이전 페이지로 돌아감

2. Link

import Link from "next/link";

export default function Details({ movie }) {
  const urlObject = {
    pathname: "/about/[id]",
    query: { id: movie.id, name: movie.name },
  };

  return (
    <div>
      <Link href={urlObject}>
        <a>About</a>
      </Link>
    </div>
  );
}

3. Cath All Routes

페이지에서 모든 Path를 가져와 쿼리 파라미터 하는 방법, URL에 원하는 데이터를 출력하고 그 데이터를 활용할 수 있어 유용하다.

예시

/movies/movies/Spider-Man:%20No%20Way%20Home/634649 라는 경로가 있을 때,
useRouter의 query에 담기는 정보:

params: ["Spider-Man: No Way Home", "634649"];

이를 활용해서 데이터 출력해보자.

export default function MovieDetail() {
  const router = useRouter();
  const [title, id] = router.query.params || [];
  // router.query.params가 정의되지 않은 경우 빈 배열 []로 대체
  return (
    <div>
      <h4>ID: {id}</h4>
      <h4>Movie Name:{title}</h4>
    </div>
  );
}

참고
https://nextjs.org/docs