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

Posted 2021-04-08

我正在尝试根据网址中的查询创建具有不同内容的反应页面。例如：事物？类型= 0和事物？类型= 1导致不同的过滤内容。

问题是，当切换到这些页面时，React没有触发我的页面的重新呈现。我需要手动刷新页面以获得所需的结果。

我尝试使用生命周期中的构建功能，但不使用它们会触发页面刷新。它尝试在componentWillReceiveProps方法中进行我的获取，然后我必须在链接上单击两次以获取我的过滤内容（这比没有页面刷新但不是用户友好的更好）https://facebook.github.io/react/docs/component-specs.html

答案

您可能希望使用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
    });
  };
};

我不确定这是否是一个好的方法，但它应该至少起作用。