`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)`

返回的第二个值是一个用于设置新的搜索参数的函数，并在调用时导致导航。您可以在可选的第二个参数中传递导航选项来配置导航。

<button
  onClick={() => {
    const params = new URLSearchParams();
    params.set("someKey", "someValue");
    setSearchParams(params, {
      preventScrollReset: true,
    });
  }}
/>

`setSearchParams((prevParams) => newParams, navigateOptions)`

setter 函数还支持一个用于设置新搜索参数的函数。

<button
  onClick={() => {
    setSearchParams((prev) => {
      prev.set("someKey", "someValue");
      return prev;
    });
  }}
/>