React Router の便利なHooks API 5選

概要

React Router が提供する便利なフックを以下にまとめます。それぞれ、URL に関連する操作や状態管理を簡単に行えるように設計されています。

---

1. useLocation

• 概要: 現在の URL の情報（パス、クエリ、ハッシュ、状態など）を取得する。

• 主な用途:

  • 現在のパスやクエリパラメータを基にしたロジックを実装。
  • リンクや遷移元の情報（state）を受け取る。

• 戻り値の主なプロパティ:

  • pathname: 現在のパス（例: /home）。
  • search: クエリパラメータ部分（例: ?id=123）。
  • hash: ハッシュ部分（例: #section1）。
  • state: ページ遷移時に渡された任意のデータ。

• 例:

  const location = useLocation();
  console.log(location.pathname); // '/about'
  

---

2. useNavigate

• 概要: プログラム的にページ遷移を行うためのフック。

• 主な用途:

  • ボタンやイベントをトリガーにページ遷移を実行。
  • 条件に応じたリダイレクトを実装。

• 主な機能:

  • navigate('/path'): 指定したパスに移動。
  • navigate(-1): 履歴の前のページに戻る。
  • navigate('/path', { replace: true }): 履歴を置き換える（戻るボタンで戻れない）。

• 例:

  const navigate = useNavigate();
  navigate('/profile'); // /profile に遷移
  

---

3. useParams

• 概要: 動的ルートパラメータを取得するためのフック。

• 主な用途:

  • 動的 URL（例: /user/:id）からパラメータを取得。
  • 動的なデータを扱うページで使用。

• 戻り値:

  • URL のパラメータをキーとするオブジェクト。

• 例:

  const { id } = useParams();
  console.log(id); // 例えば '123'
  

---

4. useSearchParams

• 概要: クエリパラメータ（?key=value）を取得・更新するためのフック。

• 主な用途:

  • URL クエリを取得してロジックに利用。
  • クエリパラメータの追加・更新。

• 主な機能:

  • searchParams.get('key'): クエリパラメータを取得。
  • setSearchParams({ key: 'value' }): クエリパラメータを更新。

• 例:

  const [searchParams, setSearchParams] = useSearchParams();
  console.log(searchParams.get('id')); // '123'
  setSearchParams({ page: '2' }); // ?page=2 を設定
  

---

5. useMatch

• 概要: 現在の URL が特定のパスに一致するかを確認し、その情報を取得する。

• 主な用途:

  • パスが一致する場合の条件付きレンダリング。
  • パスに一致した場合に動的な処理を実行。

• 戻り値:

  • 一致した場合は、params（動的パラメータ）やpathnameなどを含むオブジェクト。
  • 一致しない場合は null。

• 例:

  const match = useMatch('/user/:id');
  if (match) {
    console.log(match.params.id); // '123'
  }
  

---

各フックの比較

フック	用途	主な戻り値	主な機能例
useLocation	現在の URL の情報を取得	pathname, search, state	現在のクエリや状態の取得
useNavigate	プログラム的にページ遷移を行う	-	条件に基づくページ遷移
useParams	動的ルートパラメータを取得	パラメータオブジェクト	/user/:id のような ID の取得
useSearchParams	クエリパラメータを取得・更新	searchParams, setSearchParams	クエリパラメータの管理・更新
useMatch	指定したパスに現在の URL が一致するか確認	params, pathname, pattern	パス一致時の動作

---

主なユースケース別の選択

1. 現在の URL 情報を取得したい場合:
   • → useLocation
2. プログラムでページ遷移したい場合:
   • → useNavigate
3. 動的な URL の一部を取得したい場合:
   • → useParams
4. クエリパラメータを取得・更新したい場合:
   • → useSearchParams
5. 特定のパスに一致しているかを確認したい場合:
   • → useMatch

---

まとめ

React Router のフックは、URL 操作や状態管理を直感的かつ効率的に行うためのツールです。それぞれのフックは特定のユースケースに適しており、組み合わせて使用することで複雑なルーティングやナビゲーションも簡単に実装できます。