/ / React-Router odświeża stronę po zmianie trasy w pasku adresu - javascript, reactjs, redux, react-router, react-redux

React-Router odświeża stronę po zmianie trasy w pasku adresu - javascript, reactjs, redux, react-router, react-redux

Używam redux i react-redux, aby zmienić stan mojej aplikacji.

Mam dwa składniki, Login i Home.

Wyślę akcję, aby zaktualizować stan, jeśli użytkownik jest poprawnie zalogowany i nawiguje do niego Home składnik. Używam autogguarda na trasie Home składnik, aby sprawdzić, czy użytkownik jest zalogowany, czy nie.

Ale kiedy nawiguję do Home komponent, wpisując trasę na pasku adresu, strona jest odświeżana, a stan zmienia się na wartości początkowe.

Jak mogę zachować wartości stanu, nawet jeśli przechodzę do komponentu za pomocą paska adresu?

Odpowiedzi:

4 dla odpowiedzi № 1

Będziesz musiał przechowywać dane w localstorage jeśli nawigujesz do komponentu przy użyciupasek adresu. Gdy nawigujesz po pasku adresu, przypomina to odświeżenie strony i utrata całego sklepu. Będziesz musiał ponownie nawilżyć sklep, aby pokazać poprzedni stan redux.

Możesz użyć middleware takich jak redux-persist lub redux-storage co pozwoli zaoszczędzić sklep redux i nawilży sklep redux na stronie przeładowania.

Powiązane pytania

react-router-redux: Nie można odczytać właściwości 'listen' of undefined at syncHistoryWithStore - react-router-redux
Jak dodać React Router do istniejącej aplikacji do tworzenia-reakcji? - reactjs
Jak wysłać rekwizyty do subrodzonego komponentu za pomocą React-Routera i React-Redux? - reactjs, react-router, react-redux, react-router-redux
React Router lub Link Nie działa - reactjs, react-redux, react-router-redux, react-router-dom
Reaktywuj przekierowanie Redux podczas przekazywania wartości - reactjs, redux, react-router, react-redux
Czy z routerem reagującym można uzyskać dostęp do kontekstu z podpowiedzi onEnter trasy? - reactjs, router reagujący
Globalne wyskakujące okienko w React with Router i Redux - reactjs, react-router, react-redux
Dostęp do store.dispatch w sadze do użycia z reagującym routem redux - reactjs, react-router, react-router-redux, redux-saga, react-router-v4
Zareaguj na problem z adresem URL bazowego adresu URL i tagiem linku - reactjs, react-router
Get `Typ elementu jest nieprawidłowy: oczekiwano błędu` podczas używania routera react-redux - reactjs, react-router, react-redux, react-router-redux, react-router-dom
React Router OnEnter hook jest wywoływany dwukrotnie - reactjs, react-router, react-router-redux
Jak przejść do określonej ścieżki w działaniu w aplikacji React with Redux - reactjs, react-router, react-redux
czy mimo to nawiguje się w aplikacji React-Router V4 spoza środowiska reagowania? - reactjs, redux, react-redux, react-router-v4, react-router-dom
Usuń queryKey z hashHistory react-router-redux - reactjs, redux, react-router, react-redux, react-router-redux
Czy react-router-dom <Przekierowanie /> nie działa z syncHistoryWithStore? - reactjs, redux, react-router, react-redux, react-router-redux
reag-router Link nie działa - reactjs, react-router, react-redux
Zmień parametr React jeśli zmieni się trasa - reactjs, react-router, redux
React Chrome Extension - React Router v4 nie odbiera zmian adresu URL od treści strony - javascript, reactjs, google-chrome-extension, react-router, react-router-v4
React-Router jest stroną odświeżającą, gdy podążam drogą z użyciem <a> tag - javascript, reactjs, react-router
Jak skonstruować React App z całą rejestracją logowania i stroną domową z api także - javascript, reactjs