返回当前 URL 的 URLSearchParams 和一个更新它们的函数的元组。设置搜索参数会引起导航。
import { useSearchParams } from "react-router";
export function SomeComponent() {
const [searchParams, setSearchParams] = useSearchParams();
// ...
}
setSearchParams 函数元组的第二个元素是一个可用于更新搜索参数的函数。它接受与 defaultInit 相同的类型，并将导致导航到新的 URL。
let [searchParams, setSearchParams] = useSearchParams();
// a search param string
setSearchParams("?tab=1");
// a shorthand object
setSearchParams({ tab: "1" });
// object keys can be arrays for multiple values on the key
setSearchParams({ brand: ["nike", "reebok"] });
// an array of tuples
setSearchParams([["tab", "1"]]);
// a `URLSearchParams` object
setSearchParams(new URLSearchParams("?tab=1"));
它还支持像 React 的 setState 那样的函数回调
setSearchParams((searchParams) => {
searchParams.set("tab", "2");
return searchParams;
});
setSearchParams 不支持 React 的 setState 实现的排队逻辑。在同一个 tick 中多次调用 setSearchParams 不会基于先前的值构建。如果您需要此行为，可以手动使用 setState。
请注意，searchParams 是一个稳定的引用，因此您可以可靠地将其用作 React 的 useEffect hooks 中的依赖项。
useEffect(() => {
console.log(searchParams.get("tab"));
}, [searchParams]);
然而，这也意味着它是可变的。如果您在不调用 setSearchParams 的情况下更改该对象，如果其他一些状态导致组件重新渲染，其值将在渲染之间发生变化，并且 URL 将不会反映这些值。
function useSearchParams(
defaultInit?: URLSearchParamsInit,
): [URLSearchParams, SetURLSearchParams]
您可以使用默认值初始化搜索参数，但它不会在第一次渲染时更改 URL。
// a search param string
useSearchParams("?tab=1");
// a shorthand object
useSearchParams({ tab: "1" });
// object keys can be arrays for multiple values on the key
useSearchParams({ brand: ["nike", "reebok"] });
// an array of tuples
useSearchParams([["tab", "1"]]);
// a `URLSearchParams` object
useSearchParams(new URLSearchParams("?tab=1"));
当前 URLSearchParams 的元组和一个更新它们的函数。