React hooksを理解する（useNavigate）

## 目次
- useNavigate とは？
- useNavigate の基本的な使い方
- useNavigate の便利な使い方
- よくある使用例
- useNavigate の注意点
- まとめ

## useNavigateとは？

Reactアプリケーションでルーティングを実現するためのライブラリに、React Routerがあります。
useNavigateはReact Routerの提供するフックの一つで、プログラム的にページ遷移を実行するために使われます。

通常、React Routerでは `<Link>` コンポーネントを使って画面遷移を行いますが、以下のように イベントハンドラー内で遷移したい 場合に使うのが`useNavigate`です。

- ボタンをクリックしたとき
- フォーム送信後に特定のページにリダイレクトしたいとき
- 条件に応じて別ページに遷移させたいとき


## useNavigateの基本的な使い方

#### 1. インポート
`useNavigate`は、React Routerのフックの一つなので、`react-router-dom`からインポートします。

```jsx
import { useNavigate } from "react-router-dom";
```
#### 2. 基本構文
`useNavigate`を呼び出すと、遷移を行う関数が返されます。この関数を使って、指定したパスにページ遷移を実行します。

```jsx
const navigate = useNavigate();
navigate("/path");
```

#### 3. シンプルな例

```jsx
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. 戻る・進む

ブラウザの「戻る」や「進む」と同じような動作を実現することもできます。

```jsx

const navigate = useNavigate();

// 1つ前のページに戻る
navigate(-1);

// 1つ進む
navigate(1);

```

#### 2. 状態を渡す
navigateを使うと、ページ遷移時に状態 (state) を渡すことができます。

```jsx

navigate("/path", { state: { key: "value" } });

```

遷移先で受け取るには、React Router の useLocation フックを使います。

#### 例 : 状態を渡して表示

```jsx

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;

```

```jsx

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 には、遷移の動作を細かく制御するためのオプションを指定できます。

```jsx

navigate("/path", { replace: true });

```

#### replaceオプション
- `replace: true`を指定すると、遷移後の履歴が上書きされます。
- つまり「戻るボタン」で戻れない状態になります。


## よくある使用例

#### 1. ボタンで遷移

```jsx

function MyComponent() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/profile")}>
      プロフィールページに移動
    </button>
  );
}

```

#### 2. フォーム送信後のリダイレクト

```jsx

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    // ログイン処理
    navigate("/dashboard"); // ログイン成功後にダッシュボードへ
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">ログイン</button>
    </form>
  );
}

```

#### 3. 条件付きの遷移

```jsx

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