当我在地址栏中更改路由时，React-Router正在刷新页面

Question

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?

Answer 1

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.