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

我的应用程序有两个页面，第一个是主页，它是一个项目列表，使用ajax加载，并支持分页。单击列表中的某个项目时，它将呈现一个新页面，显示该项目的详细信息。我使用的是

react路由器

，工作正常

但是，当我按下“后退”按钮时，我将返回主页，之前的所有状态都将丢失，我必须再次等待ajax加载，并且也将丢失分页

---

因此，我如何改进这一点，让页面像普通页面一样运行（当您按下后退按钮时，您可以立即返回到以前的状态，即使使用相同的滚动位置），谢谢。

您应该使用如下示例中的动态路由：

<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} />

---

我自己解决了这个问题，提供了一个模块

存储

，如下所示：

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

---

这对我很有用。

如果你有两个实际的HTML页面，你需要依赖本地存储，或者只使用网页。@wiredparie我只有一个HTML页面。你在哪里存储应用程序的状态？第二次触发Ajax请求的原因是什么？@wiredparie点击一个按钮我花了很长时间都无法相信react没有一个内置的方法来处理这个问题。但到目前为止，这是最好的解决方案，无需添加其他依赖项。