useSearchParams

返回当前 URL 的 searchParams 的元组和一个用于更新它们的函数。设置搜索参数会触发导航。

¥Returns a tuple of the current URL's searchParams and a function to update them. Setting the search params causes a navigation.

import { useSearchParams } from "@remix-run/react";

export function SomeComponent() {
  const [searchParams, setSearchParams] = useSearchParams();
  // ...
}

签名

¥Signature

const [searchParams, setSearchParams] = useSearchParams();

searchParams

返回的第一个值是一个 Web URLSearchParams 对象。

¥The first value returned is a Web URLSearchParams object.

setSearchParams(params, navigateOptions)

返回的第二个值是一个用于设置新搜索参数的函数，调用时会触发导航。你可以将可选的第二个参数与 导航选项 一起传递以配置导航。

¥The second value returned is a function to set new search params and causes a navigation when called. You can pass an optional second argument with navigate options to configure the navigation.

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

setSearchParams((prevParams) => newParams, navigateOptions)

setter 函数还支持设置新搜索参数的函数。

¥The setter function also supports a function for setting new search params.

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