从路由器返回时如何保持反应组件状态？

Question

我有两个反应组件，比如说 A 和 B。当 A 显示在页面上时，用户更改该页面上的某些内容，导致 A 内部的某些状态发生更改。然后用户单击导航到 B 的按钮router.push('/b')。然后用户单击后退按钮并将页面导航到 A，这是由 完成的router.goBack()。现在当前的 URL 是 A，但之前更新的状态已经消失。用户返回 A 时如何保持状态？

Answer 1

我认为您只需要BrowserHistory通过像这样初始化它来在路由器上启用它：<Router history={new BrowserHistory}>。

在此之前，您应该要求BrowserHistory from 'react-router/lib/BrowserHistory'

我希望这有帮助！

 var BrowserHistory = require('react-router/lib/BrowserHistory').default;

var App = React.createClass({
 render: function() {
    return (
        <div>xxx</div>
    );
  }
});

React.render((
<Router history={BrowserHistory}>
    <Route path="/" component={App} />
</Router>
), document.body);

您可以尝试的另一种方法是，

this.context.router.goBack()

无需导航混合！

编辑：使用 React v15 和 ReactRouter v3.0.0 更新（2016 年 8 月 20 日）：

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});