目次
- useNavigate とは？
- useNavigate の基本的な使い方
- useNavigate の便利な使い方
- よくある使用例
- useNavigate の注意点
- まとめ
useNavigateとは？
Reactアプリケーションでルーティングを実現するためのライブラリに、React Routerがあります。
useNavigateはReact Routerの提供するフックの一つで、プログラム的にページ遷移を実行するために使われます。
通常、React Routerでは <Link> コンポーネントを使って画面遷移を行いますが、以下のように イベントハンドラー内で遷移したい 場合に使うのがuseNavigateです。
- ボタンをクリックしたとき
- フォーム送信後に特定のページにリダイレクトしたいとき
- 条件に応じて別ページに遷移させたいとき
useNavigateの基本的な使い方
1. インポート
useNavigateは、React Routerのフックの一つなので、react-router-domからインポートします。
import { useNavigate } from "react-router-dom";
2. 基本構文
useNavigateを呼び出すと、遷移を行う関数が返されます。この関数を使って、指定したパスにページ遷移を実行します。
const navigate = useNavigate();
navigate("/path");
3. シンプルな例
import React from "react";
import { useNavigate } from "react-router-dom";
function HomePage() {
const navigate = useNavigate();
const goToAboutPage = () => {
navigate("/about"); // "/about" ページに遷移
};
return (
<div>
<h1>ホームページ</h1>
<button onClick={goToAboutPage}>About ページに移動</button>
</div>
);
}
export default HomePage;
useNavigateの便利な使い方
1. 戻る・進む
ブラウザの「戻る」や「進む」と同じような動作を実現することもできます。
const navigate = useNavigate();
// 1つ前のページに戻る
navigate(-1);
// 1つ進む
navigate(1);
2. 状態を渡す
navigateを使うと、ページ遷移時に状態 (state) を渡すことができます。
navigate("/path", { state: { key: "value" } });
遷移先で受け取るには、React Router の useLocation フックを使います。
例 : 状態を渡して表示
import React from "react";
import { useNavigate } from "react-router-dom";
function HomePage() {
const navigate = useNavigate();
const goToDetailPage = () => {
navigate("/details", { state: { userId: 123 } }); // userId を渡す
};
return (
<button onClick={goToDetailPage}>詳細ページへ</button>
);
}
export default HomePage;
import React from "react";
import { useLocation } from "react-router-dom";
function DetailPage() {
const location = useLocation();
const { state } = location;
return (
<div>
<h1>詳細ページ</h1>
<p>受け取ったユーザー ID: {state?.userId}</p>
</div>
);
}
export default DetailPage;
3. オプション指定
navigate には、遷移の動作を細かく制御するためのオプションを指定できます。
navigate("/path", { replace: true });
replaceオプション
-
replace: trueを指定すると、遷移後の履歴が上書きされます。 - つまり「戻るボタン」で戻れない状態になります。
よくある使用例
1. ボタンで遷移
function MyComponent() {
const navigate = useNavigate();
return (
<button onClick={() => navigate("/profile")}>
プロフィールページに移動
</button>
);
}
2. フォーム送信後のリダイレクト
function LoginForm() {
const navigate = useNavigate();
const handleSubmit = (event) => {
event.preventDefault();
// ログイン処理
navigate("/dashboard"); // ログイン成功後にダッシュボードへ
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">ログイン</button>
</form>
);
}
3. 条件付きの遷移
function Dashboard() {
const navigate = useNavigate();
const isAuthenticated = false; // 認証状態を仮定
if (!isAuthenticated) {
navigate("/login", { replace: true }); // 認証されていない場合ログインページへ
}
return <h1>ダッシュボード</h1>;
}
<Link /> との違い
| 特徴 | <Link /> |
useNavigate |
|---|---|---|
| 目的 | ユーザーがリンクをクリックしてページ遷移を行う | プログラムの中で動的にページ遷移を行う |
| 実行のトリガー | ユーザーのクリック | イベントや関数内で条件付きで実行 |
| 書き方 |
<Link to="/path"> を使用 |
フックを呼び出して navigate("/path") を実行 |
| ブラウザ履歴操作 | 不可 | 戻る、進む、履歴の置き換えが可能 |
| 動的な遷移 | 難しい（状態に応じて書き換えが必要） | 要） 状態や条件によって簡単に遷移先を変更可能 |
| 使いやすさ | シンプルで直感的 | 条件付き処理や高度な遷移が必要な場合に便利 |
まとめ
- useNavigate は React Router でプログラム的にページ遷移を行うためのフック
- 基本的な使い方
- useNavigate を呼び出して関数を取得
- navigate("/path") で指定したパスに遷移
- 主な機能
- ページ遷移
(navigate("/path")) - 戻る・進む
(navigate(-1) / navigate(1)) - 状態 (state) の受け渡し
(navigate("/path", { state: ... })) - 履歴の置き換え
(navigate("/path", { replace: true })) - フォーム送信後のリダイレクトや認証機能の実装など、条件付きの遷移で活用される
- ページ遷移