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