您如何以编程方式更新react-router中的查询参数？

reactjs React.js

小小飞云

2020-03-12

我似乎找不到不使用来使用react-router更新查询参数的方法<Link/>。hashHistory.push(url)似乎没有注册查询参数，并且似乎也不能将查询对象或任何内容作为第二个参数传递。

如何从更改URL /shop/Clothes/dresses，以/shop/Clothes/dresses?color=blue在反应路由器没有使用<Link>？

而且是一个onChange真正的函数来监听查询变化的唯一途径？为什么没有自动检测到查询更改并对参数更改做出反应？

第1082篇《您如何以编程方式更新react-router中的查询参数？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Harry宝儿 2020.03.12

It can also be written this way 

this.props.history.push(`${window.location.pathname}&page=${pageNumber}`)
AHarry 2020.03.12

当您需要一个模块来轻松解析查询字符串时，建议使用查询字符串模块。

http：// localhost：3000？token = xxx-xxx-xxx

componentWillMount() {
    var query = queryString.parse(this.props.location.search);
    if (query.token) {
        window.localStorage.setItem("jwt", query.token);
        store.dispatch(push("/"));
    }
}

在这里，成功进行Google-Passport身份验证后，我将从Node.js服务器重定向回我的客户端，该身份验证使用令牌作为查询参数进行重定向。

我正在使用query-string模块对其进行解析，保存并使用react-router-redux的 push更新URL中的查询参数。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android