useNavigate
useNavigate
フックは、ユーザーの操作やエフェクトに応答してブラウザ内でプログラムによってナビゲートできる関数を返します。
このフックよりも action
や loader
で redirect
を使用する方が良いことがよくありますが、それでも使用できるケースがあります。
引数
to: string
最も基本的な使い方は、href文字列を受け取ります。
パスは相対指定できます。
useNavigate()
の挙動について、future.v3_relativeSplatPath
futureフラグがスプラットルート内でどのように動作するかについては、useResolvedPath
ドキュメントのスプラットパスセクションを参照してください。
to: Partial<Path>
Partial<Path>
値を渡すこともできます。
to: Number
数値を渡すと、ブラウザは履歴スタック内で戻るまたは進むように指示されます。
これは、ブラウザの履歴スタックがアプリケーションのみに限定されていないため、アプリケーションから離れてしまう可能性があることに注意してください。
options
2番目の引数は、オプションオブジェクトです。
- 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()
も利用する必要があります
- このビュー遷移に特定のスタイルを適用する必要がある場合は、