javascript - 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);
}

这对我有用。