useSearchParams

useSearchParams在应用中主要的功能是提供对于当前页面位置URL中的查询串的读取和修改。这个Hook会返回当前页面URL中的查询串内容,以及修改查询串内容的方法。以下是useSearchParams的函数签名。

type ParamKeyValuePair = [string, string];

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

type SetURLSearchParams = (
    nextInit?: URLSearchParamsInit,
    navigateOpts?: : { replace?: boolean, state?: any}
) => void;

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

useSearchParams在应用中可以像以下示例中一样使用。

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

  let handleSubmit = event => {
    event.preventDefault();
    let params = serializeQuery(event.target);
    setSearchParams(params);
  };

  return <form onSubmite={handleSubmit}></form>;
}

Tip

这里需要注意的是,useSearchParams的执行效果与useNavigate返回的navigate函数十分相像,但是useSearchParams影响的仅仅是URL中的查询串。