【问题标题】：react-router v6: Navigate to a URL with searchParamsreact-router v6：使用 searchParams 导航到 URL
【发布时间】：2021-04-24 07:02:44
【问题描述】：

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

我可以使用 createSearchParams 生成 searchParams，然后将其转换为字符串并将其附加到 URL 的末尾，并在其间添加 ?，但这似乎是一种 hack。

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

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"
});

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

【问题讨论】：

为了让这个对话不那么混乱，在 react-router 中说“参数”是 URI 中的变量，也就是 /:id 是 params.id，你所说的通常是指作为location.search 部分又名query-string。有一个很好的帮助库，对于这些操作来说相当常见，但我不认为 react-router 附带这个字符串/解析实用程序npmjs.com/package/query-string
由于问题似乎与 react-router-v6 有关，您可能需要更新标签 (v4)
您可以使用来自 (usehooks.com) 的“useRouter”

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

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

【讨论】：

上面引用的方法第一次起作用。即，从 Parent1 > child1 当我使用相同的逻辑时，通过使用 Parent2，Child2，它被导航到“Child1”而不是“Child2”为 parent1 和 child 1 设置的路由是 } /> } /> } /> } /> Child 1 和 Child2 的参数设置为 github 导航中引用的 ({路径名：“listing”，搜索：'?' + createSearchParams({ foo: "bar" })})

【解决方案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

【讨论】：