はじめに

Reactアプリを開発する際、検索やフィルター、ページネーションなどでクエリパラメータ扱うことはよくあります。

React Router(v6)以降では、useSearchParamsを使用することで簡潔にクエリパラメータを管理することができます。

useSearchParamsの特徴

特徴としては以下になります。

1. クエリパラメータの取得・更新が簡単
2. URLの変更時にリアクティブに再レンダリングされる
3. setSearchParamsを使えばuseNavigateを使わずにクエリを変更できる

useSearchParamsの基本的な使い方

(1) クエリパラメータの取得
現在のURLが?category=react&page=2の場合、クエリパラメータを取得する方法は以下の通りです。

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

const MyComponent = () => {
  const [searchParams] = useSearchParams();
 
  return (
    <div>カテゴリ: {searchParams.get("category")}</div>
    <div>ページ: {searchParams.get("page")}</div>
  )
}

// 以下のように表示されます
カテゴリ: react
ページ: 2

(2) クエリパラメータの追加
現在のURLが?category=ts&page=2のとき、新たにsort=ascを追加する方法です。

const [searchPamras, setSearchParams] = useSearchParams();

const updateQuery = () => {
  setSearchParams((pre) => ({
  ...Object.fromEntries(prev),
  sort: "asc"
　}))
}

// 結果
?category=ts&page=2&sort=asc

カスタムフックでの使用例

最後に具体的なカスタムフックの例をお見せします。

const useQueryParams = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const updateQuery = (newParams: Record<string, string>) => {
    setSearchParams((prev) => ({
      ...Object.fromEntries(prev),
      ...newParams,
    }));
  };

  return { searchParams, updateQuery };
};


// 使用例
const Component = () => {
  const { updateQuery } = useQueryParams();

  return (
    <button onClick={() => updateQuery({ sort: "asc" })}>
      ソートを追加
    </button>
  );
};

他にもURLSearchParamsを使用する方法などもありますが、React Routerのv6以上を採用していればuseSearchParamsの使用がおすすめです。