React router, how to restore state after browser back button?

Question

I'm trying to figure out how to make my React SPA app maintain state when the user navigates with the back/forward browser buttons. E.g. the user is filling a form, then he moves back and forward and the form is automatically restored.

I reviewed many JavaScript routers around but none seem to address this issue properly... (or even at all).

Currently I'm using React Router 4 and this is the pattern I'm adopting:

1. when programmatically leaving the page, I first save current page's state with history.replace(this.state); then I move out of the page with history.push(newLocation)
2. when a page component is created (componentWillMount) I check for this.props.location.state !== undefined and if so, I restore it with this.setState(this.props.location.state)

My question is: is the above pattern correct? suggested? Is there any better and widely adopted way?

Answer 1

after a while I found a reasonable workaround:

• in react, after every this.setState() I keep state synchronized with history using window.history.replaceState({ key: history.location.key, state: this.state})
• when a "page" component is mounted or refreshed (willMount and willReceiveProps) I check for state in props.params.location.state: if there is one, I do restore it; if there is none I create a fresh new state.
• when navigating on the same page, I do not use routes, I just use this.setState and window.history.pushState
• when navigating outside of the page, I just use routes and avoid to pass anything in the state

This solution seems to work nicely, the only minor cons are:

• state must be serializable
• this.setState is a pitfall because it's asynchronous, you cannot use this.state after it, unless you do trickery.
• initial empty state must be provided by a function to be used during the restore or init phase, it can't just stay in the constructor() of the Component
• in Firefox, automatic scroll restoration after the back button works randomly, don't know why, but Chrome and Edge are ok.

Overall I have written a PageComponent that extends Component that does all the init/restoration work; it also overrides this.setState to make it syncs automatically with history and avoids the asynchronous annoyances.

Answer 2

Use getDerivedStateFromProps and check if there has been a change in value of props.location.key to restore states only when the user navigates with browser buttons.

 static getDerivedStateFromProps(props,states){
         if ((typeof props.location !== 'undefined') &&
             (typeof props.location.state !== 'undefined') &&
              (states.location_key !== props.location.key)) {
             let newState = props.location.state;
             newState.location_key = props.location.key;
             return newState;
         }
    }

Answer 3

You can also use the session storage instead of state. Just replace the useState() function and use the useSessionStorage().

For example:

const [myState, setMyState] = useSessionStorage("state_key", "initial_value")


const handleSomeChangeOnState = (event: any) => {
  setMyState("new_value")
}

Answer 4

When a React component un-mounts, the state is also destroyed. https://beta.reactjs.org/learn/preserving-and-resetting-state

You can use Redux https://redux.js.org/, the state management library to extract your state from the component. This way, even when your component unmounts, the state will persist as long as the Redux Provider remains mounted (which should be the case if you set your provider at the top level of your application).

Redux slice example

const mySlice = createSlice({
  initialState: { textFieldA: '' },
  name: "textFields",
  reducers: {
    setTextFieldA(state, action) {
      state.textFieldA = action.payload;
    }
  }
});

You'll want to create a Redux store and add your reducer to it.

In your React Component, use the redux slice.

import { setTextFieldA } from './slice'

function MyComponent() {
  const { textFieldA } = useSelector((state) => state.myReducer);

  function onTextFieldAChange(text) {
    dispatch(setTextFieldA(text));
  }

  // render component
}

Now if MyComponent unmounts, the state will persist in the store if I navigate away to a different part of my application. When I rerender MyComponent, textFieldA will remain the same as I left it.

Answer 5

i thought about this problem too, For example you have multi-step form and you want to navigate between steps by browser controls too. As result you have to use router for storing activeStep, but you don't want to share it in browser URL. The solution is store step in router state:

const location = useLocation();
const history = useHistory();

const onSubmit = useCallback(() => {
  history.push({
    ..location,
    state: {
      activeStep: 1
    }
  });
}, [...]);

As result your step will restore event after page refreshing, but you can't share step to other user. It's perfect.

The next problem is store form data between steps. We can't store it in router state, too. I've chosen for it sessionStorage. It has similar properties like router state. As result you have to update session storage fro example on submit and retrieve data on init form:

const location = useLocation();
const history = useHistory();
const [initData] = useState(getFormDataFromStorage());

const onSubmit = useCallback(() => {
  saveFormDataToStorage(...);
  history.push({
    ..location,
    state: {
      activeStep: 1
    }
  });
}, [...]);

i prepared the demo and GitHub where you can test it and details you can find here (RU)