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