ReactJS：使用浏览器按钮导航时保存状态

Question

我的应用程序有两个页面，第一页面是主页，该页面是项目列表，加载了ajax，并支持分页。当您单击列表中的项目时，它将呈现一个新页面，显示该项目的详细信息。我正在使用react-router，效果很好。

但是，当我按返回按钮时，我将返回首页，并且所有先前的状态都丢失了，我不得不再次等待ajax加载，并且也失去了分页功能。

因此，我该如何改善它，让页面像普通页面一样工作（当您按返回按钮时，即使滚动位置相同，也可以立即返回到以前的状态），谢谢。

Answer 1

我自己通过提供一个模块来解决了这个问题Store，就像这样：

// Store.js

var o = {};

var Store = {
  saveProductList: function(state) {
    o['products'] = state;
  },
  getProductList: function() {
    return o['products'];
  }
};    

module.exports = Store;

然后在主页组件中，加载并保存状态：

componentDidMount: function() {
  var state = Store.getProductList();
  if (state) {
    this.setState(state);
  } else {
    // load data via ajax request
  }
},

componentWillUnmount: function() {
  Store.saveProductList(this.state);
}

这对我有用。