Reactjs Href Causes State Loss

I have a parent component called EnrollForm with a BrowserRouter that routes to different sub-components which are the pages of my overall EnrollForm. Each time a sub-component pa

Solution 1:

This cause a page reload, which reset your all you states (Redux included) and render everything again:

window.location.href = '/enrollment-form/citizenship';

Replace it by:

this.props.history.push('/enrollment-form/citizenship')

Note that you might need to wrap your component with withRouter like this:

exportdefaultwithRouter(EnrollForm);

With the import:

import { withRouter } from"react-router";

Hope it helps. Happy coding!

Solution 2:

Never use href with react, instead use for declarative change route, or wrap component in withRouter and use history.push for imperative change