0

I am working on a react app where I am using React-router along with connect-react-router for persisting routing information in redux. I am injecting the history to connected-react-router using the CreateBrowserHistory function provides by the history package in my redux store configuration.

Further, from one of my list components I am navigating to a details component by using this.props.history.push({ pathname: details-path, state: { someRequiredState }) in the list component. This navigation works fine.

However on refreshing the browser while on the details page and checking the current history (this.props.history) I see that the state is undefined. My assumption was that the history will be maintained by the browser even between page refreshes. On checking the CreateBrowserHistory function output on page refresh I see that the state is undefined.

As a result of this undefined state the details component errors out.Is there a way to make this state persist by default. I do not want to go the route of storing the state in session or local storage as the history API is already doing the same.

UPDATE: In the following snippet the state is persisted even after page refresh on the same version of Chrome (as well as firefox)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="5">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
<script>
if (!history.state) {
    console.log("first time load");
}
history.pushState("reload", null);
console.log(history.state);  
</script>
</body>
</html>
Sudipto
  • 41
  • 7
  • Seems Chrome also works now like Firefox & it’s the expected behaviour. https://github.com/ReactTraining/history/issues/557 – Yushan Jun 26 '21 at 08:49
  • This is expected browser behaviour. Path state is always ephemeral, you should not rely on it to pass critical data around. It's really only for describing a single instance of browser navigation. – lawrence-witt Jun 26 '21 at 08:52

0 Answers0