Next.js useParams, usePathname, useRouter, useSearchParams

"use client"; // 클라이언트

import {
  useParams,
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation"; // import

const DetailLink = () => {
  let router = useRouter(); // client에서만 사용가능, router 변수에 할당
  let dynamicRoute = useParams(); // 유저가 [dynamic route] 입력한거 출력
  let nowUrl = usePathname(); // 현재 URL 출력
  let searchParams = useSearchParams(); // 쿼리스트링 전부 출력
  return (
    <button
      onClick={() => {
        router.push("/"); // 페이지 이동
        //  router.back()     뒤로가기
        //  router.forward()  앞으로가기
        //  router.refresh()  새로고침 (변동사항있는 일부분만)
        //  router.prefetch('/detail/dsds') === <Link/>
        //  페이지에 필요한 것들을 미리 로드시켜줌.

        //  Link 태그에서 prefetch 속성 변경가능
        //  <Link prefetch={false} />
      }}
    >
      버튼
    </button>
  );
};

export default DetailLink;