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

这适合我。

Answer 2

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

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

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

2 个答案: