【React】useParamsをつかってURLパラメータを扱う

useParamsとは？

useParamsは、React RouterのHooksの1つで、URLのパラメータを抽出するために使用されます。React Routerを使用して、動的なURLを定義する場合、URL内に変数を含めることができます。

useParamsの使い方

下記はuseParamsを使用してTodoアイテムを表示する例です。

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

function TodoItem() {
  let { id } = useParams();

  const todo = {
    id: 1,
    title: 'Learn React Router',
    completed: false
  };

  return (
    <div>
      <h2>Todo Item: {todo.title}</h2>
      <p>ID: {todo.id}</p>
      <p>Status: {todo.completed ? 'Completed' : 'Incomplete'}</p>
    </div>
  );
}

この例では、/users/:usernameのようなパスが設定されており、その中の:usernameは動的なパラメーターとして機能します。UserProfileコンポーネントでは、useParamsを使用して、URLパラメータからusernameを取得しています。そして、{username}を使用して、そのユーザー名を表示しています。

もし、URLが/users/johnだった場合、UserProfileコンポーネントは、{username}がjohnであることを抽出し、”User Profile: john”というテキストを表示します。

このように、useParamsはReact RouterのURLパラメータを抽出するためのHooksであり、動的なURLの一部として扱われるパラメータをコンポーネント内で簡単にアクセスできるようにします。