Question

我有两个反应组件，比如说A和B.当A显示在页面上时，用户会更改该页面上的某些内容，这会导致A内部的某些状态发生变化。然后用户点击一个按{{1}导航到B的按钮}。然后，用户单击后退后退按钮并将页面导航到A，由router.push('/b')完成。现在，当前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>
    );
  }
});

Answer 2

为此，您需要管理整个应用程序的状态。因此，您需要使用redux来实现此目的。在我的范围内，不能在这里详细说明redux，但你可以使用redux和react-redux来管理这种状态，方法是从npm安装它们。感谢

如何从路由器goback维护反应组件状态？

2 个答案: