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

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

本文介绍了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"
    })}`
});

来源:https://github.com/ReactTraining/react-router/issues/7743#issuecomment-770296462

这篇关于REACT-RIGHTER V6:使用earParams导航到URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:REACT-RIGHTER V6:使用earParams导航到URL

基础教程推荐