react-router v6：使用 searchParams 导航到 URL

Question

我使用的是 react-router 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

你所拥有的在我看来很好。使用 generatePath 实用程序可能会更简洁一些，但它仍然是相同的基本思想。

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

...

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

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

如果您考虑一下，这并不是什么大问题，需要在某处定义 URL，无论是路径参数还是查询字符串的一部分，您仍然需要提供详细信息并构建要导航到的路径字符串。

演示 - POC

Answer 2

这并不像我想要的那么简单，但我认为这是我们目前所能得到的最接近的。 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