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

Question

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

但是，当我按下后退按钮时，我会回到主页，之前的所有状态都丢失了，我必须等待ajax 再次加载，分页也丢失了。

那么，我怎样才能改进这个，让页面像普通页面一样（当你按下后退按钮时，你可以 return 立即回到之前的状态，即使滚动位置相同），谢谢。

Answer 1

您应该像这个例子一样使用动态路由：

<Route name="inbox" handler={Inbox}>
  <Route name="message" path=":messageId" handler={Message}/>
  <DefaultRoute handler={InboxStats}/>
</Route>

如果您更改 messageId（子组件），您在收件箱（父）组件中的状态仍然相同。

它将看起来像这样：

<Route name="search" path="/search/:query?/:limit?/:offset?" handler={Search} />

Answer 2

我通过提供一个模块 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);
}

这对我有用。

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

ReactJS: save state when navigate with browser button

javascript

reactjs