第18回：useNavigateフック：ボタン操作や処理完了後にページを切り替える方法

これまでは <Link> タグをクリックしてユーザー自身に移動してもらってきました。しかし、実際のアプリでは「ログインボタンを押して、成功したらマイページへ飛ばす」といった、プログラム側からの画面遷移が必須です。

2026年のReact開発において、この「自動的な移動」を司るのが useNavigate フックです。

1. useNavigateとは？

「今すぐこのURLへ移動せよ！」という命令をJavaScriptから出せるようにするフックです。

Linkタグ： ユーザーがクリックして移動する（静的）。
useNavigate： プログラムの処理（if文など）の結果として移動する（動的）。

2. 【実践】ログイン成功後にトップページへ飛ばす

疑似的なログインフォームを作り、送信後に自動で画面が切り替わる仕組みを実装しましょう。

JavaScript

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';

function LoginPage() {
  const [userId, setUserId] = useState("");
  // 1. navigate関数を呼び出せるように準備
  const navigate = useNavigate();

  const handleLogin = (e) => {
    e.preventDefault();
    if (userId === "admin") {
      // 2. 条件に合致したら、指定したパスへ移動させる
      alert("ログイン成功！ホームへ戻ります。");
      navigate("/");
    } else {
      alert("ユーザーIDが違います。");
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <h2>ログイン</h2>
      <input 
        value={userId} 
        onChange={(e) => setUserId(e.target.value)} 
        placeholder="ID（adminと入力）" 
      />
      <button type="submit">ログイン実行</button>
    </form>
  );
}

const Home = () => <h2>🏠 ホーム画面（ログイン済み）</h2>;

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
}

CodeSandboxでuseNavigateの自動遷移を体験する

3. コードの解説

Maps("/"): 引数に移動先のパスを入れます。-1 を入れると「ブラウザの戻るボタン」と同じ動作（1つ前のページに戻る）も可能です。
JavaScriptの if 文との組み合わせ: 第9回：条件付きレンダリングで学んだ論理構造を使い、「成功した時だけ Maps する」という制御ができます。