My react web application navigates to an external site on clicking a button. On the external site, if I click the back button in the browser, I get redirected back to my react application. Now:
- in an incognito window, the react application maintains the state that was set before redirecting.
- in a non-incognito window, the react application “resets” its state to the default state.
Note: I am unable to recreate this inconsistency locally (i.e. via running the react app with npm run start
). I have only observed this in a production-ized build in an incognito window.
Minimum Reproducible Example
I have prepared a minimal example that does the following:
- Click button on page to get redirected
- Clicking the button toggles a state variable to
true
, which re-renders the page to hide the button and show “redirecting” text instead - After waiting 3 seconds, redirect to external page (example.com) via
window.location.href
- On external site, click the browser back button
- Return to react app
Behaviour in non-incognito window:
Here, the page gets reset and the state variable has its default value of false
Screencast from 2024-05-07 15-19-54.webm
Behaviour in incognito window:
Here, the page maintains the state before navigation, and the state variable maintains value true
Screencast from 2024-05-07 15-22-10.webm
Application code:
import { useState } from 'react';
function App() {
const [redirecting, setRedirecting] = useState(false);
return (
<div className='App'>
{redirecting && <p>redirecting...</p>}
{!redirecting && (
<button
onClick={async () => {
setRedirecting(true);
setTimeout(
() => (window.location.href = 'https://example.com'),
3000
);
}}
>
Click to redirect
</button>
)}
</div>
);
}
export default App;
Browsers I have tried recreating this on:
- Chrome (inconsistency exists between incognito window and non-incognito window)
- Firefox (inconsistency exists between private window and non-private window)
- Safari (inconsistency exists between private window and non-private window)
React version: 17.0.2
Steps To Reproduce
As mentioned earlier, I have only been able to recreate the inconsistency in a production-ized build of my react application. I have deployed my minimal reproducible example via Netlify, the URL is: https://master–animated-lily-d6cfcf.netlify.app/
Alternately, you may deploy a version of the application yourself (see links to code example)
- Open productionized react app in incognito window
- Click button “click to redirect”, this sets the state variable value from
V1
toV2
- Navigate to external website
- Click back button in browser on external website
- On return to react app, the state variable will maintain value
V2
Link to code example:
Production-ized build: https://master–animated-lily-d6cfcf.netlify.app/
Source code: https://github.com/pranay1208/ext_nav_min
The current behavior
In incognito mode, app maintains the state it had before navigation
In non-incognito mode, app resets to default state
The expected behavior
Consistent behaviour in incognito and non-incognito windows (preferably that incognito window resets state on navigation)