Jak zapobiec ponownemu uruchomieniu przeglądarki za pomocąreakcji-router-dom i zachować stan

Dec 23 2020

Rozwijam się z React-router-dom. Teraz tworzę stronę, na której użytkownicy mogą wprowadzać informacje w formularzu. Chcę, aby użytkownik nie stracił wprowadzonych informacji, jeśli przypadkowo powróci do poprzedniej strony.

Najpierw znalazłem sposób na zatrzymanie przeglądarki w poniższym artykule. Wydaje się, że w momencie powrotu do poprzedniej strony, natychmiast wracasz do strony pierwotnej, skutecznie uniemożliwiając powrót do poprzedniej strony.

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

React Router Dom v4 obsługuje przycisk Wstecz przeglądarki

Jednak w tym przypadku poprzednia strona zostanie zwrócona raz, więc wszystkie informacje o bieżącej stronie (stan) zostaną zresetowane. Czy istnieje rozwiązanie, które zapobiega resetowaniu stanu? A może istnieje mądrzejszy sposób rozwiązania tego problemu?

Poniżej przygotowałem obrazek do wyjaśnienia.

Odpowiedzi

2 Mahdi Dec 23 2020 at 15:10

Masz kilka sposobów podejścia do swojej odpowiedzi, ale wszystkie mają 1 koncepcję, a jest to komponent wyższego rzędu, więc w tym przypadku musisz mieć komponent najwyższego poziomu (wyższy niż router reagujący), więc kiedy lokalizacja się zmieniła, nie tracisz informacji o stanie. innymi słowy, musisz mieć ogólny stan.

Jak więc możesz osiągnąć ten cel? masz kilka sposobów i jestem tutaj, aby Ci pomóc.

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

to tylko kilka przykładów tego, co możesz zrobić, aby zapobiec utracie stanu w przypadku zmiany lokalizacji przeglądarki.