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

Question

我似乎找不到如何在不使用 <Link/> 的情况下使用 react-router 更新查询参数。 hashHistory.push(url) 似乎没有注册查询参数，而且您似乎不能将查询对象或任何东西作为第二个参数传递。

如何在不使用 <Link> 的情况下在 react-router 中将 url 从 /shop/Clothes/dresses 更改为 /shop/Clothes/dresses?color=blue ？

onChange 函数真的是监听查询变化的唯一方法吗？为什么不会像参数更改那样自动检测和响应查询更改？

原文由 claireablani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 push 方法 hashHistory 中，您可以指定查询参数。例如，

 history.push({
  pathname: '/dresses',
  search: '?color=blue'
})

或者

history.push('/dresses?color=blue')

您可以查看此 存储库 以获取有关使用 history

原文由 John F. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

约翰的回答 是正确的。当我处理参数时，我还需要 URLSearchParams 接口：

 this.props.history.push({
    pathname: '/client',
    search: "?" + new URLSearchParams({clientId: clientId}).toString()
})

您可能还需要用 withRouter HOC 包装您的组件，例如。 export default withRouter(YourComponent); 。

原文由 spedy 发布，翻译遵循 CC BY-SA 4.0 许可协议