react-router-domを使用してブラウザーが戻らないようにし、状態を維持する方法

Question

私はreact-router-domで開発しています。現在、ユーザーがフォームに情報を入力できるページを作成しています。私がやりたいのは、ユーザーが誤って前のページに戻った場合に、入力した情報が失われないようにすることです。

私は最初に、以下の記事でブラウザを停止する方法を見つけました。前のページに戻った瞬間、すぐに元のページに戻ってしまい、事実上前のページに戻れないようです。

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

React Router DomV4ハンドルブラウザの戻るボタン

ただし、この場合、前のページが1回返されるため、現在のページ情報（状態）はすべてリセットされます。状態がリセットされないようにするための解決策はありますか？または、これを解決するためのよりスマートな方法はありますか？

以下、説明用の画像を用意しました。

Answer 1

答えにアプローチする方法はいくつかありますが、それらはすべて1つの概念を持っており、それは高次コンポーネントであるため、この場合、最上位コンポーネント（react-routerよりも高い）が必要です。場所が変わったので、状態の情報を失うことはありません。言い換えれば、あなたは一般的な状態を持っている必要があります。

では、どうすればこの目標を達成できますか？あなたにはいくつかの方法があります、そして私はあなたがそれらを使うのを手伝うためにここにいます。

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. ..。

これらは、ブラウザの場所が変更されたときに状態が失われるのを防ぐためにできることのほんの一例です。