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

Question

我正在使用 react-router v6。 我想导航到具有 searchParams 的 URL，但我没有看到开箱即用的方法。 useNavigate允许我通过传入字符串导航到 URL。 useSearchParams允许我在当前页面上设置 searchParams。

我可以使用createSearchParams生成 searchParams，然后将其转换为字符串，并将 append 转换为带有?的 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

要优雅地执行此操作，您应该使用useSearchParams挂钩而不是useNavigate 。

如文档中所述：

setSearchParams function 的工作方式类似于导航，但仅适用于 URL 的搜索部分。另请注意，setSearchParams 的第二个参数与要导航的第二个参数的类型相同。

import { useSearchParams } from "react-router-dom";

...

const [searchParams, setSearchParams] = useSearchParams()

...

const handleClick = () => {
    searchParams.set('foo', 'bar');
    setSearchParams(searchParams)
}

Answer 2

你所拥有的对我来说看起来不错。 使用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);
  };
};

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

演示 - POC

Answer 3

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

Answer 4

您可以轻松地使用它们：

 import { useNavigate, useSearchParams } from "react-router-dom"; ... const [searchBarParams, setSearchBarParams] = useSearchParams(); const navigate = useNavigate(); ... const handleChange = (event, value) => { navigate("/") searchBarParams.set("foo",value) setSearchBarParams(searchBarParams); }