在页面之间移动而不会丢失页面内容 - React JS答案

【问题标题】：Move between pages without losing pages content - React JS在页面之间移动而不会丢失页面内容 - React JS
【发布时间】：2021-09-25 17:36:28
【问题描述】：

我正在尝试在页面之间导航而不会丢失页面数据。例如，我有一个包含许多输入字段的页面，如果用户填写了所有这些字段并尝试移动到另一个页面并返回到第一个页面，那么所有输入都消失了。我正在使用 react-router-dom 但没有找到防止这种情况发生的方法。

到目前为止我做了什么：

 import { Route, Switch, HashRouter  as Router } from "react-router-dom";
<Router>
     <Switch>
          <Route path="/home" exact component={Home} />
          <Route path="/hello-world" exact component={HellWorld} />
     </Switch>
</Router>

主页组件：

  navigateToHelloWorld= () => {
    this.props.history.push('/hello-world')
  };

Hello World 组件：

this.props.history.goBack();

【问题讨论】：

我不知道这样的普遍性可以得到支持。我只会将所有状态变量值存储在 localStorage 中，并在组件呈现上存在值时从那里恢复（使用 useState 时，然后作为默认值）。

标签： reactjs react-router react-router-dom

【解决方案1】：

我不知道这是否能得到如此笼统的支持。我只会将所有状态变量值存储在 localStorage 中，并在组件渲染上存在值时从那里恢复（当使用 useState 作为默认值时）。像这样的：

const Home = () => {
  const [field, setField] = useState(localStorage.field || '');

  const handleUpdate = (value) => {
    setField(value);
    localStorage.field = value;
  }

  // also add a submit handler incl. `delete localStorage.field`;
 
  return ... // your input fields with handleUpdate as handler.  
}

【讨论】：

这可以通过路由来实现吗？
不，我不这么认为。

【解决方案2】：

通常，您需要做的就是将数据存储在某个地方，或者是一个不会卸载的组件，比如您正在处理您的路线的组件，这实际上不是一个好主意，但它确实有效！

另一种方法是使用某种状态管理器，例如“mobx”、“redux”、“mst”，或者是一些很棒的工具，并且有很好的文档来帮助您入门

另一种选择是将您的数据存储在浏览器中，例如，会话存储可能是一种选择，因为它会保留数据直到用户关闭选项卡并且您可以在每个组件安装中读取它。

【讨论】：