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

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

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

您可以阅读有关导航的更多信息：https://github.com/ReactTraining/history#navigation

Answer 2

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