`useSearchParams`

返回目前 URL 的 searchParams 元組，以及一個更新它們的函式。設定 search params 會觸發導航。

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

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

簽名

const [searchParams, setSearchParams] = useSearchParams();

`searchParams`

返回的第一個值是 Web URLSearchParams 物件。

`setSearchParams(params, navigateOptions)`

返回的第二個值是用於設定新的 search params 的函式，並且在呼叫時觸發導航。您可以傳遞一個包含導航選項的可選第二個參數來配置導航。

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

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

設定函式也支援使用函式來設定新的 search params。

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