如何使用react-router-dom防止浏览器后退并保留状态

Question

我正在使用react-router-dom进行开发。现在，我正在创建一个页面，用户可以在表单中输入信息。我的目标是，如果用户意外返回到上一页，防止他们丢失所输入的信息。

我首先找到了以下文章中阻止浏览器返回的方法。当您返回到上一页时，您立即返回到原始页面，有效地防止您返回到上一页。

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

React Router Dom v4处理浏览器返回按钮

然而，在这种情况下，上一页只能返回一次，因此所有当前页面信息（状态）都将被重置。有没有解决方案可以防止状态重置？或者有更聪明的方法来解决这个问题吗？

下面，我已经准备了一张图片来解释。

- karutt

---

使用像Redux这样的全局存储管理系统可以解决您的问题。 请参见此处：https://react-redux.js.org/introduction/quick-start - Bourbia Brahim

使用Redux并将您的值存储在那里。 - Nisharg Shah

Answer 1

您有几种方法来回答这个问题，但所有方法都有一个概念，那就是Higher-order-component（高阶组件）。因此，在这种情况下，您必须拥有一个顶级组件（高于react-router），以便在位置更改时不会丢失状态信息。换句话说，您必须拥有一个通用的状态。

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

1. redux- https://redux.js.org/。
2. context - https://reactjs.org/docs/context.html。
3. react state - https://reactjs.org/docs/higher-order-components.html。
4. localStorage或sessionStorage- https://www.robinwieruch.de/local-storage-react。
5. ...

这些只是一些示例，介绍了如何防止在浏览器位置更改时丢失状态。

- Mahdi

---

通过使用本地存储，我立即解决了我的问题。谢谢！！ - karutt