CODEWITHSUNDEEP
javascriptreactjsreduxreact-routerreact-redux
Pranab V V
Pranab V V

Reputation: 1446

React-Router is refreshing page when I change the route in the address bar

I am using redux and react-redux to change the state of my application.

I have two components, Login and Home.

I will dispatch an action to update the state if the user is correctly logged and navigate him to the Home component. I am using an authguard in the route of Home component to check whether the user is logged or not.

But when I navigate to the Home component by typing the route in the address bar, the page is refreshing and the state changes to its initial values.

How can I maintain the state values even if I navigate to a component by using the address bar?

Upvotes: 2

Views: 1060

Answers (1)

illiteratewriter
illiteratewriter

Reputation: 4333

You'll have to store the data in localstorage if you are navigating to a component by using the address bar. When you are navigating by address bar it is kind of like refreshing the page and the entire store is lost. You'll have to hydrate the store again for it to show the previous redux state.

You can use middlewares such as redux-persist or redux-storage which will save the redux store and hydrate the redux store on page reload.

Upvotes: 6

Related Questions