React-router-dom ile tarayıcıyı geri yükleme ve durumu koruma

Question

React-router-dom ile geliştiriyorum. Şimdi, kullanıcıların bir forma bilgi girebileceği bir sayfa oluşturuyorum. Yapmak istediğim, kullanıcının yanlışlıkla bir önceki sayfaya dönmesi durumunda girdiği bilgileri kaybetmesini önlemek.

İlk önce aşağıdaki makalede tarayıcıyı durdurmanın bir yolunu buldum. Görünüşe göre bir önceki sayfaya döndüğünüz anda, hemen orijinal sayfaya dönüyorsunuz, bu da bir önceki sayfaya dönmenizi etkili bir şekilde engelliyor.

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

React Router Dom v4 tarayıcı geri düğmesi

Ancak, bu durumda, önceki sayfa bir kez döndürülecek, bu nedenle tüm geçerli sayfa bilgileri (durum) sıfırlanacaktır. Durumun sıfırlanmasını önlemek için bir çözüm var mı? Yoksa bunu çözmenin daha akıllıca bir yolu var mı?

Aşağıda açıklama için bir görsel hazırladım.

Answer 1

Cevabınıza yaklaşmanın birkaç yolu var, ancak hepsinin 1 konsepti var ve bu Yüksek dereceli bileşen, yani bu durumda, üst düzey bir bileşene sahip olmalısınız (React-yönlendiriciden daha yüksek), yani ne zaman konum değiştiğinde, eyaletteki bilgileri kaybetmezsiniz. başka bir deyişle, genel bir duruma sahip olmalısınız.

Peki bu hedefe nasıl ulaşabilirsiniz? birkaç yolunuz var ve bunları kullanmanıza yardımcı olmak için buradayım.

1. redux - https://redux.js.org/.
2. bağlam - https://reactjs.org/docs/context.html.
3. tepki durumu - https://reactjs.org/docs/higher-order-components.html.
4. localStorage veya sessionStorage - https://www.robinwieruch.de/local-storage-react.
5. ...

bunlar, tarayıcının konumu değiştiğinde durum kaybını önlemek için yapabileceklerinizin yalnızca birkaç örneğidir.