在页面之间导航时如何在ReactJS站点上保存页面编辑

在页面之间导航时如何在ReactJS站点上保存页面编辑,reactjs,state,single-page-application,amplify,Reactjs,State,Single Page Application,Amplify,我有一个基本的ReactJS应用程序,有5个页面,我认为这是一个SPA(每个页面与菜单共享一个公共标题元素),每个页面都有自己的路径,我制作的菜单项如下: <Link to="/save">Save</Link> 保存 为了让问题变得简单,让我们假设在一个页面上,用户在文本框中输入他的名字。然后用户单击另一个页面,然后单击返回第一个页面。当我们回到第一页时,文本框是空的。用ReactJS解决这个问题最常用的方法是什么?我不想让文本框被清空。事实上

我有一个基本的ReactJS应用程序,有5个页面,我认为这是一个SPA(每个页面与菜单共享一个公共标题元素),每个页面都有自己的路径,我制作的菜单项如下:

<Link to="/save">Save</Link> 
保存
为了让问题变得简单,让我们假设在一个页面上,用户在文本框中输入他的名字。然后用户单击另一个页面,然后单击返回第一个页面。当我们回到第一页时,文本框是空的。用ReactJS解决这个问题最常用的方法是什么?我不想让文本框被清空。事实上,在视图之间切换时,我会有很多不想消失的东西,我不想编写代码来重新创建所有东西的状态,只是让它仍然存在


这当然是一个非常基本的问题。即使只是给我一个好的谷歌搜索字符串来为我指明正确的方向也会很有帮助。

您描述的问题类似于
vue.js
中的
保持活动状态

componentWillUnmount
时,您可以使用redux保存页面数据,并在
componentDidMount
时获取页面日期


或者您可以尝试此操作

是否将值存储在持久化状态管理器中?如果没有,可能是localStorage?我感觉ReactJS中有一些工具可以做到这一点。可能有一种叫做上下文的东西,也许我没有正确地使用它。我认为keep alive听起来像是对我问题的最直接的回答,但它似乎没有太多的使用。我在网上看了一些Redux的信息,乍一看,这是矫枉过正的,但我会做更多的研究。还可以隐藏和取消隐藏HTML以实现相同的功能(display:none | block;)