Docs
API
Hooks
useNavigate

useNavigate hook

useNavigate hook은 새로운 위치로 탐색할 수 있는 navigate 함수를 반환하는 hook입니다. 여기에는 경로명, 검색 매개변수, 해시, 위치 상태의 변경이 포함됩니다.

useNavigate options

useNavigate hook은 단일 인수인 options 객체를 허용합니다.

opts.from option

  • 타입: string
  • 선택 사항
  • 설명: 탐색을 시작할 위치입니다. 현재 위치가 아닌 특정 위치에서 새 위치로 탐색하려는 경우에 유용합니다.

useNavigate returns

  • 새로운 위치로 탐색할 수 있는 navigate 함수.

navigate function

navigate 함수는 새로운 위치로 탐색할 수 있는 함수입니다.

navigate function options

navigate 함수는 단일 인수인 options 객체를 허용합니다.

navigate function returns

  • 탐색이 완료되면 해결되는 Promise.

Examples

import { useNavigate } from "@tanstack/react-router";
 
function PostsPage() {
  const navigate = useNavigate({ from: "/posts" });
  const handleClick = () => navigate({ search: { page: 2 } });
  // ...
}
 
function Component() {
  const navigate = useNavigate();
  return (
    <div>
      <button
        onClick={() =>
          navigate({
            to: "/posts",
          })
        }
      >
        Posts
      </button>
      <button
        onClick={() =>
          navigate({
            to: "/posts",
            search: { page: 2 },
          })
        }
      >
        Posts (Page 2)
      </button>
      <button
        onClick={() =>
          navigate({
            to: "/posts",
            hash: "my-hash",
          })
        }
      >
        Posts (Hash)
      </button>
      <button
        onClick={() =>
          navigate({
            to: "/posts",
            state: { from: "home" },
          })
        }
      >
        Posts (State)
      </button>
    </div>
  );
}
useMatchesuseParentMatches