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

Question

我正在使用反应路由器 v6。我想导航到具有 searchParams 的 URL，但我没有找到开箱即用的方法。useNavigate允许我通过传入字符串来导航到 URL。useSearchParams允许我在当前页面上设置 searchParams。

我可以使用生成 searchParams createSearchParams，然后将其转换为字符串，并将其附加到 URL 的末尾，?中间有一个，但这看起来像是一个 hack。

我希望能够做类似的事情：

const navigate = useNavigate();

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

我的黑客解决方法：

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

Answer 2

你所拥有的对我来说看起来不错。使用generatePath和createSearchParams实用程序可能会更干净一些，但它仍然是相同的基本思想。

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

RRDv6.4 更新

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

...

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

  return (pathname, params) => {
    const path = {
      pathname,
      search: createSearchParams(params).toString()
    };
    navigate(path);
  };
};

Answer 3

为了优雅地做到这一点，您应该使用useSearchParamshook 而不是useNavigate.

正如文档中所指定的：

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

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

...

const [searchParams, setSearchParams] = useSearchParams()

...

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