目次

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 }))
- フォーム送信後のリダイレクトや認証機能の実装など、条件付きの遷移で活用される