Reactjs SPA和x2B；后退按钮&x2B；形态状态

我正在将jsp多页应用程序（mpa）转换为React单页应用程序（spa）。在mpa中，“后退”按钮起作用，窗体保持其状态

在我的新React应用程序中，“后退”按钮起作用，但窗体不保留其状态

问题：有没有一个技巧可以让我的表单在“支持”它之后保持它的状态（在spa中）

以下是我提出的两个解决方案：

将整个表单状态编码到url中。然后在每次表单更改时使用更新的url更新浏览器历史记录。但是，这似乎是一个巨大的痛苦的屁股

修改我的应用程序的结构，使所讨论的表单（React组件）保持挂载状态（只需使用css可见性或display属性来显示和隐藏）。但是，在大型应用程序中，将每个页面都装入DOM似乎会导致性能问题

顺便说一句，我正在使用popstate和浏览器历史api来实现SPA行为（即，我已经滚动了我自己的路由器），如上所述

---

希望有人能提出一个比我的两个解决方案更好的解决方案。谢谢。

使用Redux可以拥有超越任何特定组件的

状态

存储。然后在组件中，作为表单提交过程的一部分，

dispatch

a

action

，包含所有表单数据的

payload

。这应该在状态下缓存，然后当导航结构重新安装组件时，它应该可以通过Redux

s

connect

function

s

MapStateTrops

方法访问此缓存。您可以从中重新填充表单

您的问题不清楚您是否以传统的方式提交

表单。我将在处理程序中使用
e.preventDefault
，并将所有表单数据放在组件的
state
上，这些数据可以发送到Redux的
state
存储，如上所述，并使用或类似的方法关闭。同时，它可以被缓存

Redux:
我最终使用了类似于WylieКПцimk_的答案，但做了一些更改：

我不想为了这一个用例而切换到Redux。因此，我使用了顶层组件（即树上较高的组件）的组件状态

我在表单组件的componentWillUnmount上缓存了表单的状态，并在componentDidMount上恢复了缓存状态

我将缓存状态作为道具从较高的组件传递给子组件

到目前为止，它的代码量非常小，工作起来很有魅力