redirect と router.push の違い

redirect と router.push の違い

redirect と router.push はどちらも、ブラウザの画面遷移を行うための方法ですが、いくつかの重要な違いがあります。

1. ブラウザ履歴への影響:

• redirect: ブラウザの履歴に新しいエントリを作成します。つまり、ユーザーが「戻る」ボタンで前の画面に戻ることができます。
• router.push: ブラウザの履歴に新しいエントリを作成しません。つまり、ユーザーが「戻る」ボタンで前の画面に戻ることができません。

2. コンポーネントの再マウント:

• redirect: 現在のコンポーネントをアンマウントし、新しいコンポーネントをマウントします。つまり、コンポーネントの状態はリセットされます。
• router.push: 現在のコンポーネントを再マウントしません。つまり、コンポーネントの状態は保持されます。

3. 使用例:

• redirect: ログイン後など、ユーザーの状態が変化したときに、新しい画面に遷移させる場合に適しています。
• router.push: ページ内での画面遷移や、ブラウザ履歴を残したくない場合に適しています。

まとめ:

項目	redirect	router.push
ブラウザ履歴	新しいエントリを作成	新しいエントリを作成しない
コンポーネントの再マウント	する	しない
使用例	ユーザーの状態が変化したとき	ページ内での画面遷移など

補足:

• router.push は、非同期処理で実行されることに注意が必要です。
• router.replace という別の方法もあります。これは router.push と似ていますが、ブラウザ履歴に新しいエントリを作成せず、現在のエントリを置き換えます。

参考情報:

• React Router v6 ドキュメント - useNavigate
• Next.js ドキュメント - router.push