React 页面不会在 url 查询更改时重新呈现

Question

我正在尝试根据 url 中的查询创建一个具有不同内容的反应页面。例如：things?type=0 和 things?type=1 导致不同的过滤内容。

问题是，当切换到这些页面时，React 不会触发我的页面的重新呈现。我需要手动刷新页面才能得到想要的结果。

我尝试使用内置生命周期功能，但没有一个会触发页面刷新。它试图在componentWillReceiveProps 方法中进行获取，然后我必须在链接上单击两次才能获取过滤后的内容（这比不刷新页面要好，但对用户不友好）。

我用这个reference。

Answer 1

您可能希望使用https://github.com/reactjs/react-router 或一些类似的库作为路由。

如果你想自己去，你必须听浏览器历史的变化。例如，您可以这样做：

componentDidMount: function () {
  var component = this;

  window.onpopstate = function() {
    console.log(window.history.state);
    component.setState({
      query: window.location.search
    });
  };
};

我不确定这是否是好方法，但至少应该可以。