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中的查询串。