Cara mencegah browser kembali dengan react-router-dom dan keep state

Question

Saya mengembangkan dengan react-router-dom. Sekarang, saya membuat halaman di mana pengguna dapat memasukkan informasi dalam formulir. Yang ingin saya lakukan adalah mencegah pengguna kehilangan informasi yang mereka masukkan jika mereka secara tidak sengaja kembali ke halaman sebelumnya.

Saya pertama kali menemukan cara untuk menghentikan browser kembali pada artikel di bawah ini. Tampaknya saat Anda kembali ke halaman sebelumnya, Anda langsung kembali ke halaman asli, secara efektif mencegah Anda kembali ke halaman sebelumnya.

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

React Router Dom v4 menangani tombol kembali browser

Namun, dalam kasus ini, halaman sebelumnya akan dikembalikan sekali, jadi semua informasi halaman saat ini (status) akan disetel ulang. Apakah ada solusi untuk mencegah negara mengatur ulang? Atau apakah ada cara yang lebih cerdas untuk mengatasi ini?

Di bawah ini, saya sudah menyiapkan gambar untuk penjelasan.

Answer 1

Anda memiliki beberapa cara untuk mendekati jawaban Anda, tetapi semuanya memiliki 1 konsep, dan itu adalah Komponen-orde-tinggi, jadi dalam hal ini, Anda harus memiliki komponen tingkat atas (Lebih tinggi dari react-router), jadi kapan lokasi telah berubah, Anda tidak kehilangan informasi di negara bagian tersebut. dengan kata lain, Anda harus memiliki keadaan umum.

Jadi bagaimana Anda bisa mencapai tujuan ini? Anda memiliki beberapa cara dan saya di sini untuk membantu Anda menggunakannya.

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

ini hanyalah beberapa contoh yang dapat Anda lakukan untuk mencegah kehilangan status saat lokasi browser telah berubah.