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

ReactJS: save state when navigate with browser button

本文关键字：导航 保存 状态 按钮 浏览器 ReactJS      更新时间：2023-09-26

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

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

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

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

这对我有用。

您应该使用动态路由，例如：

<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} />
相关文章：