ルートパラメータの取得

3日 ago

user

1 minute

React Router では、URL に埋め込まれたパラメータを useParams フックを使って簡単に取得できます。動的ルーティングを行う際に便利です。

ルーティング設定

まずは、パラメータ付きのルートを設定します。

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { UserDetail } from "./UserDetail";

export default function App() {
  return (

<BrowserRouter>

<Routes>
        <Route path="/users/:id" element={<UserDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

ここで、:id の部分が動的パラメータです。

useParams で取得する

UserDetail コンポーネント内で useParams を使うと、パラメータが取得できます。

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

export const UserDetail = () => {
  const { id } = useParams<{ id: string }>();

  return (

<div>

<h1>ユーザーID: {id}</h1>
    </div>
  );
};

補足：

useParams() は URL で定義されたパラメータ名（この例では id）をキーとしたオブジェクトを返します。
TypeScript を使っている場合は、useParams<{ id: string }>() のように型注釈を付けると補完が効きます。

パラメータの利用例

たとえば、パラメータから API を呼び出す：

useEffect(() => {
  fetch(`/api/users/${id}`)
    .then((res) => res.json())
    .then((data) => setUser(data));
}, [id]);

注意点

useParams は **ルーティングコンテキスト内（` ` の中）でのみ有効**です。
ルート定義とパラメータのキーが一致していないと undefined になります。