はじめに
Reactアプリを開発する際、検索やフィルター、ページネーションなどでクエリパラメータ扱うことはよくあります。
React Router(v6)以降では、useSearchParamsを使用することで簡潔にクエリパラメータを管理することができます。
useSearchParamsの特徴
特徴としては以下になります。
- クエリパラメータの取得・更新が簡単
- URLの変更時にリアクティブに再レンダリングされる
- 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の使用がおすすめです。