javascript - 从路由器返回时如何维护 react 组件状态？

Question

我有两个 react 组件，比如说 A 和 B。当 A 显示在页面上时，用户更改了该页面上的某些内容，导致 A 内部的某些状态发生了变化。然后用户单击一个按钮，该按钮通过 router 导航到 B .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>
    );
  }
});