import { useNavigate } from "@remix-run/react";
 
function SomeComponent() {
  const navigate = useNavigate();
  return (
    <button
      onClick={() => {
        navigate(-1);
      }}
    />
  );
}

このフックよりも actionや loaderで redirectを使用する方が良いことがよくありますが、それでも使用できるケースがあります。

引数

`to: string`

最も基本的な使い方は、href文字列を受け取ります。

navigate("/some/path");

パスは相対指定できます。

navigate("..");
navigate("../other/path");

相対的なuseNavigate()の挙動について、future.v3_relativeSplatPath futureフラグがスプラットルート内でどのように動作するかについては、useResolvedPathドキュメントのスプラットパスセクションを参照してください。

`to: Partial<Path>`

Partial<Path>値を渡すこともできます。

navigate({
  pathname: "/some/path",
  search: "?query=string",
  hash: "#hash",
});

`to: Number`

数値を渡すと、ブラウザは履歴スタック内で戻るまたは進むように指示されます。

navigate(-1); // 戻る
navigate(1); // 進む
navigate(-2); // 2つ戻る

これは、ブラウザの履歴スタックがアプリケーションのみに限定されていないため、アプリケーションから離れてしまう可能性があることに注意してください。

`options`

2番目の引数は、オプションオブジェクトです。

navigate(".", {
  replace: true,
  relative: "path",
  state: { some: "state" },
});

replace: boolean - 新しいエントリをプッシュするのではなく、履歴スタックの現在のエントリを置き換えます
relative: "route" | "path" - リンクの相対パス動作を定義します
- "route"はルート階層を使用するため、".."は現在のルートパターンのすべてのURLセグメントを削除しますが、"path"はURLパスを使用するため、".."は1つのURLセグメントを削除します
state: any - 次の場所に永続的なクライアント側のルーティング状態を追加します
preventScrollReset: boolean - <ScrollRestoration>を使用している場合、ナビゲート時にスクロール位置がウィンドウの上部にリセットされないようにします
unstable_flushSync: boolean - このナビゲーションの初期状態の更新を、デフォルトのReact.startTransitionではなく、ReactDOM.flushSync呼び出しでラップします
unstable_viewTransition: boolean - このナビゲーションにView Transitionを有効にします。これは、最終的な状態の更新をdocument.startViewTransition()でラップすることで実現します
- このビュー遷移に特定のスタイルを適用する必要がある場合は、unstable_useViewTransitionState()も利用する必要があります

引数
to: string
to: Partial<Path>
to: Number
options