useSearchParams
現在のURLのsearchParamsと、それらを更新する関数のタプルを返します。検索パラメータを設定すると、ナビゲーションが発生します。
import { useSearchParams } from "@remix-run/react";
export function SomeComponent() {
const [searchParams, setSearchParams] = useSearchParams();
// ...
}シグネチャ
const [searchParams, setSearchParams] = useSearchParams();searchParams
返される最初の値は、Web URLSearchParamsオブジェクトです。
setSearchParams(params, navigateOptions)
返される2番目の値は、新しい検索パラメータを設定し、呼び出されるとナビゲーションを引き起こす関数です。オプションの2番目の引数として、ナビゲーションを構成するためのナビゲーションオプションを渡すことができます。
<button
onClick={() => {
const params = new URLSearchParams();
params.set("someKey", "someValue");
setSearchParams(params, {
preventScrollReset: true,
});
}}
/>setSearchParams((prevParams) => newParams, navigateOptions)
セッター関数は、新しい検索パラメータを設定するための関数もサポートしています。
<button
onClick={() => {
setSearchParams((prev) => {
prev.set("someKey", "someValue");
return prev;
});
}}
/>