如何使用 react-router-dom 防止浏览器返回并保持状态

Question

我正在使用 react-router-dom 进行开发。现在，我正在创建一个用户可以在表单中输入信息的页面。我想要做的是防止用户在不小心返回上一页时丢失他们输入的信息。

我首先在下面的文章中找到了一种停止浏览器的方法。好像在你回到上一页的那一刻，你马上又回到了原来的页面，有效地阻止了你回到上一页。

React.useEffect (() => {
    return () => {
            props.history.goForward ();
        }
    }, []);

React Router Dom v4 handle browser back button

但是，在这种情况下，之前的页面会被返回一次，所以当前页面的所有信息（状态）都会被重置。是否有防止状态重置的解决方案？ 还是有更聪明的方法来解决这个问题？

下面，我准备了一张图片来说明。

Answer 1

你有几种方法来接近你的答案，但它们都有一个概念，那就是高阶组件，所以在这种情况下，你必须有一个顶级组件（高于 react-router） ，因此当位置发生变化时，您不会丢失状态中的信息。换句话说，你必须有一个一般的状态。

那么如何才能达到这个目标呢？你有几种方法，我在这里帮助你使用它们。

1. redux - https://redux.js.org/.
2. 上下文 - https://reactjs.org/docs/context.html.
3. 反应状态 - https://reactjs.org/docs/higher-order-components.html.
4. localStorage 或 sessionStorage - https://www.robinwieruch.de/local-storage-react。
5. ...

这些只是在浏览器位置更改时您可以采取哪些措施来防止丢失状态的一些示例。