Remix ドキュメント日本語版

English

useNavigate

useNavigateフックは、ユーザーの操作やエフェクトに応答してブラウザ内でプログラムによってナビゲートできる関数を返します。

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()でラップすることで実現します