useSearchParams

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)

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

<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;
    });
  }}
/>