URLパラメータの取得方法 - React Router useParams

目次

URLパラメータの取得方法 - React Router

React Routerを使用した際に、URLのパラメータを取得する方法について解説します。
特定のURLパラメータを簡単に取得するためのuseParamsフックを活用する方法を示します。

パラメータを含むルートの定義

まず、URLにパラメータ（例えば:id）を含むルートを定義します。

<Route path="/hoge/:id" component={MyComponent} />

上記の例では、/hoge/に続く部分をidとして取得できるようにルートを定義しています。

useParamsフックの利用

useParamsフックを利用することで、URLのパラメータを取得できます。

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

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

  console.log(id); // ここでidの値を確認できます

  return (
    <div>
      // コンポーネントの内容
    </div>
  );
}

上記のコードでは、URLからidという名前のパラメータを取得しています。
例えば、遷移先のURLが/hoge/123であれば、idは123として取得されます。

まとめ

React RouterのuseParamsフックを使用することで、URLから特定のパラメータを簡単に取得することができます。
この機能は、特定のリソースに基づいてページを動的に生成する場合など、多くのWebアプリケーションで役立ちます。