react-router 4 不使用查询参数更新 url

Question

我使用更高级别的过滤器组件向 URL 添加查询参数，以便用户可以与不同类型的过滤器共享链接。

我正在导出组件 withRouter() 并且一切看起来都是合法的 - 我将历史注入到组件道具中。但是，当我调用这段代码时：

this.props.history.push({
        pathname: this.props.history.location.pathname,
        query: { tags: selectedTags }
    });

它确实改变了 this.props.history 的状态，我可以看到我的查询存在，但浏览器中的 URL 没有改变。我做错了什么吗？

Answer 1

我遇到过同样的情况。我的解决方案是使用浏览器历史记录 API 的 pushState() 方法，它可以更改浏览器中的 URL。在更改页面内容方面，我使用 React 的 setState() 方法。

Answer 2

你用错了，你的代码应该是：

this.props.history.push({
        pathname: this.props.history.location.pathname,
        search: `?tags=${ selectedTags }`
    });

react-router 4 does not update url with query parameters