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

Posted 2023-02-22

【中文标题】React 页面不会在 url 查询更改时重新呈现

【英文标题】：React page does not rerender on url query change

【发布时间】：2016-12-25 21:53:11

【问题描述】：

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

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

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

我用这个reference。

【参考方案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
    );
  ;
;

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