REACT-RIGHTER V6：使用earParams导航到URL

react-router v6: Navigate to a URL with searchParams(REACT-RIGHTER V6：使用earParams导航到URL)

问题描述

我使用的是Reaction路由器V6。我想要导航到一个有earParams的URL，但我看不到一种开箱即用的方法。useNavigate允许我通过传入一个字符串导航到URL。useSearchParams允许我在当前页面上设置搜索参数。

我可以使用createSearchParams生成搜索参数，然后将其转换为字符串，并在URL的末尾加上一个中间的?，但这看起来像是一个技巧。

我希望能够做到以下几点：

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

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

推荐答案

这不像我希望的那样简单，但我认为这是我们目前能得到的最接近的结果。navigate是否支持传入搜索查询字符串(不是对象)。

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

...

const navigate = useNavigate();

navigate({
    pathname: "listing",
    search: `?${createSearchParams({
        foo: "bar"
    })}`
});