Как предотвратить возврат браузера с помощью response-router-dom и сохранить состояние

Question

Я разрабатываю с помощью response-router-dom. Теперь я создаю страницу, на которой пользователи могут вводить информацию в форму. Что я хочу сделать, так это предотвратить потерю пользователем введенной информации, если он случайно вернется на предыдущую страницу.

Сначала я нашел способ остановить браузер в статье ниже. Кажется, что в тот момент, когда вы вернетесь на предыдущую страницу, вы сразу же вернетесь на исходную страницу, эффективно предотвращая возврат на предыдущую страницу.

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

React Router Dom v4 обрабатывает кнопку возврата в браузере

Однако в этом случае предыдущая страница будет возвращена один раз, поэтому вся текущая информация (состояние) страницы будет сброшена. Есть ли решение предотвратить сброс состояния? Или есть более разумный способ решить эту проблему?

Ниже я подготовил изображение для пояснения.

Answer 1

У вас есть несколько способов подойти к вашему ответу, но все они имеют одну концепцию, и это компонент высшего порядка, поэтому в этом случае у вас должен быть компонент верхнего уровня (выше, чем реагирующий маршрутизатор), поэтому, когда местоположение изменилось, вы не теряете информацию в состоянии. Другими словами, у вас должно быть общее состояние.

Так как же достичь этой цели? у вас есть несколько способов, и я здесь, чтобы помочь вам их использовать.

1. редукция - 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. ...

это всего лишь несколько примеров того, что вы можете сделать, чтобы предотвратить потерю состояния при изменении местоположения браузера.