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

【问题标题】：How to maintain react component state when goback from router?从路由器返回时如何保持反应组件状态？
【发布时间】：2016-08-29 04:04:30
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs

【解决方案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>
    );
  }
});

【讨论】：

如果该解决方案适合您，请将其标记为正确答案，以便其他人可以从中获得帮助。
我知道浏览器历史可以在这里提供帮助。但是我的反应应用程序加载在不支持浏览器历史记录的 android webview 中。

【解决方案2】：

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

【讨论】：

我正在使用 redux，但我认为如果我在 redux 存储中放置很多状态会非常复杂。而且，这些状态只是临时状态，用完后不应该存在于 redux store 中。