`useSearchParams`

這是 useSearchParams 的網頁版。如需 React Native 版本，請按這裡。

類型聲明

declare function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

type ParamKeyValuePair = [string, string];

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type SetURLSearchParams = (
  nextInit?:
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: : NavigateOptions
) => void;

interface NavigateOptions {
  replace?: boolean;
  state?: any;
  preventScrollReset?: boolean;
}

useSearchParams 勾子用於讀取和修改當前位置 URL 中的查詢字串。與 React 自有的 useState 勾子相同，useSearchParams 會傳回一個包含兩個值的陣列：當前進位置的 search params，以及一個用於更新它們的函式。與 React 的 useState 勾子相同，setSearchParams 也支援函式更新。因此，你可以提供一個接受 searchParams 並傳回已更新版本的函式。

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

setSearchParams 函式的運作方式像 navigate，但僅適用於 URL 的 search portion。還要請注意，傳遞給 setSearchParams 的第二個參數類型與傳遞給 navigate 的第二個參數類型相同。