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

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

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