我正在将 jsp 多页应用程序 (mpa) 转换为 React 单页应用程序 (spa)。在 mpa 中，后退按钮起作用并且表单保持其状态。
在我的新 React 应用程序中，后退按钮有效，但表单不保留其状态。
问题：是否有一个技巧可以让我的表单在“支持”它（在水疗中心）后保持其状态。
这是我想出的两个解决方案：
将整个表单状态编码到 url。然后在每次表单更改时使用更新的 url 更新浏览器历史记录。但是，这似乎是一个巨大的痛苦。
修改我的应用程序的结构，以使相关表单（React 组件）保持挂载（并且只需使用 css 可见性或显示属性来显示和隐藏）。但是，在大型应用程序中，将每个页面都挂载在 DOM 中似乎可能会导致性能问题。
顺便说一句，我正在使用 popstate 和浏览器历史 API 来实现 SPA 行为（即我已经滚动了自己的路由器），如 here 所述。
希望有人可以提出比我的两个解决方案更好的解决方案。谢谢。
【问题讨论】：
标签： reactjs single-page-application
我最终使用了类似于 Wylie Кулик 的答案，但做了一些更改：
我不想仅仅为了这个用例而切换到 Redux。所以我使用了我的顶级组件（即树上更高的组件）的组件 state。
我在表单组件的 componentWillUnmount 上缓存了表单的状态，并在 componentDidMount 上恢复了缓存状态。
我将缓存状态作为道具从较高组件传递给子组件。
它最终变成了非常少量的代码，并且到目前为止工作起来就像一个魅力。
【讨论】：
使用 Redux 拥有一个超越任何特定组件的 state 存储。然后在您的组件中，作为表单提交过程的一部分，dispatch 和 action 和 payload 的所有表单数据。这应该被缓存在状态，然后当组件被导航结构重新挂载时，它应该可以通过 Reduxsconnectfunctions mapStateToProps 方法访问这个缓存。您可以从中重新填充您的表单。
您的问题不清楚您是否以传统的旧方式提交form。我会在处理程序中使用e.preventDefault，并将所有表单数据保存在组件的state 上，如上所述，这可以发送到Redux 的state 存储，并使用superagent 或类似方法进行Ajaxed。同时可以缓存。
Redux：http://redux.js.org
【讨论】：