【React】パスパラメータとクエリパラメータの違いとReactでの使い方

はじめに

Reactで個人開発をしている中で、useParamsを使いパスパラメータによる内容の出し分けを実装しようとしたところ、パスパラメータとクエリパラメータの違いを正しく理解できておらずエラーに悩まされました。今回はその違いを整理しつつ、正しい実装方法を共有します。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

パスパラメータとクエリパラメータ

パスパラメータ

https://qiita.com/masafumi1073

URL構造の一部として利用されます。情報が特定のリソースに紐付いている場合に適しています。例: /users/:id
ここではmasafumi1073がユーザーID。

クエリパラメータ

https://qiita.com/search?keyword=react

URLの後に?で始まる形式で、追加条件やオプション情報を渡す際に使います。例: /search?keyword=react
ここではid=7がクエリパラメータ。

「情報がリソースに属する場合はパスパラメータ」、「条件やフィルターの場合はクエリパラメータ」を使います。

私が間違えていたこと

当初、パスパラメータを使うべき場面で、クエリパラメータを指定してしまい正しく動作しませんでした。

誤ったコード

const Menu = ({ pageId }) => {
  const pathname = useLocation().pathname;
  const { id } = useParams();
  const pageUrl = pathname === `/home/?id=${id}`; // パスパラメータとクエリパラメータの混同

  return id && (
    <Box onClick={onclickAnswer}>
      <Center>
        <MdOutlineQuestionAnswer size="30px" color="#f9a8d4" />
      </Center>
      <Text color="#f9a8d4">Home</Text>
    </Box>
  );
};

修正後のコード

useParamsを使いパスパラメータ/home/:idを取得する形に変更しました。

const Menu = ({ pageId }) => {
  const { id } = useParams();

  return id && (
    <Box onClick={onclickAnswer}>
      <Center>
        <MdOutlineQuestionAnswer size="30px" color="#f9a8d4" />
      </Center>
      <Text color="#f9a8d4">Home</Text>
    </Box>
  );
};

今回の教訓は「URL構造を正しく理解し、適切なパラメータを選択する」ことです。ReactのuseParamsはパスパラメータ専用であり、クエリパラメータはuseLocationを使う必要があります。

終わりに

URL構造を正しく理解することは、Reactでのルーティング実装において重要なポイントだと思います。今回の教訓を活かして、適切なパラメータ選択をしていきたいと思います。

参考

『パスパラメータとクエリパラメータの違い』Zenn

『パスパラメータとクエリパラメータ』Zenn

『[React] React Router 後編』 Qiita

useParams

reactでURLパラメータから値を取得する方法　Qiita