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

IT技术 javascript reactjs react-router react-router-dom

2021-04-28 11:53:25

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

我可以使用生成 searchParamscreateSearchParams然后将其转换为字符串并将其附加到 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"
});

我错过了文档中的某些内容吗？

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

你所拥有的在我看来很好。使用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

其它你可能感兴趣的问题

上一篇在渲染容器之前react redux dispatch action 下一篇使用 Formik 进行 React-select 不更新选择字段而是执行其他所有操作