javascript - react 路由器 v6 : Navigate to a URL with searchParams

Question

我正在使用 react 路由器 v6。我想导航到具有 searchParams 的 URL，但我没有看到开箱即用的方法。 useNavigate允许我通过传入字符串导航到 URL。 useSearchParams允许我在当前页面上设置 searchParams。
我可以使用 createSearchParams 生成 searchParams然后将其转换为字符串并将其附加到 URL 的末尾，并带有 ?介于两者之间，但这似乎是一个黑客行为。
我希望能够做类似的事情:

const navigate = useNavigate();

// listing?foo=bar
navigate("listing", {
    params: {
        foo: "bar"
    }
});

我的hacky解决方法:

function useNavigateParams() {
    const navigate = useNavigate();

    return (url: string, params: Record<string, string | string[]>) => {
        const searchParams = createSearchParams(params).toString();
        navigate(url + "?" + searchParams);
    };
}

const navigateParams = useNavigateParams();

navigateParams("listing", {
    foo: "bar"
});

我是否遗漏了文档中的某些内容？

Answer 1

更新
不再需要在前面添加 ?搜索(截至 2021 年 9 月):

import { createSearchParams, useNavigate } from "react-router-dom";

...

const navigate = useNavigate();

navigate({
    pathname: "listing",
    search: createSearchParams({
        foo: "bar"
    }).toString()
});

这并不像我想的那么简单，但我认为这是我们目前能得到的最接近的。 navigate确实支持传入搜索查询字符串(不是对象)。

import { createSearchParams, useNavigate } from "react-router-dom";

...

const navigate = useNavigate();

navigate({
    pathname: "listing",
    search: `?${createSearchParams({
        foo: "bar"
    })}`
});

来源: https://github.com/ReactTraining/react-router/issues/7743#issuecomment-770296462