React Router: ナビゲーションとパラメータの受け取り useParams

目次

React Router: ナビゲーションとパラメータの受け取り

React Router は React アプリケーションにおけるルーティングのための人気のあるライブラリです。
この記事では、useNavigate でのナビゲーションと、useParams での URL パラメータの受け取り方を解説します。

useNavigate でのナビゲーション

useNavigate は、プログラム的に新しいページへの遷移を制御するためのフックです。

import { useNavigate } from 'react-router-dom';

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

  const handleGoToWork = (id) => {
    navigate(`/work/${id}`);
  };

  return (
    <div>
      <button onClick={() => handleGoToWork(5)}>
        Go to Work 5
      </button>
    </div>
  );
}

上記の例では、ボタンをクリックすると、/work/5 へ遷移します。

useParams での URL パラメータの受け取り

useParams は、現在の URL のパラメータを抽出するフックです。

import { useParams } from 'react-router-dom';

function WorkDetails() {
  const { id } = useParams();

  return (
    <div>
      Work ID: {id}
    </div>
  );
}

この例では、/work/:id パスの :id パラメータを受け取り、それを画面に表示しています。

まとめ

React Router は、useNavigate と useParams のようなフックを提供しており、これにより、ナビゲーションや URL パラメータの取得が非常に簡単になります。
これらのフックを利用することで、アプリケーションのルーティングを簡単かつ効果的に制御することができます。