I need to detecta a page refresh and redirect the user to another page if a page has been refreshed. I am trying this option but it seems it is not the right way to do it. Firstly, because it seems the performance.navigation.type is deprecated and secondly, I am using multiple effect hooks here, which I am not sure if that is correct, Any ideas for a more elegant solution?
const EligibilityPage = () => {
const [hasRouteChanged, sethasRouteChanged] = useState(false);
const location = useLocation();
useEffect(() => {
sethasRouteChanged(true);
}, [location]);
useEffect(() => {
if (window.performance) {
if (window.performance.navigation.type == "reload" || window.performance.navigation.type == 1) {
if (!hasRouteChanged) window.location.href = "/personal-details-page";
}
}
}, []);
There's no problem with your current workflow but window.performance.navigation.type is deprecated. window.performance.navigation property is deprecated in the Navigation Timing Level 2 specification. Please use the PerformanceNavigationTiming interface instead.
PerformanceNavigationTiming.type
This is an experimental technology.
Check the Browser compatibility table carefully before using this in production.
Check if a page gets reloaded or refreshed in JavaScript
const pageAccessedByReload = (
(window.performance.navigation && window.performance.navigation.type === 1) ||
window.performance
.getEntriesByType('navigation')
.map((nav) => nav.type)
.includes('reload')
);
alert(pageAccessedByReload);
As a workaround, I can only suggest if you're using redux then saving some value in redux (or whatever you use) store to indicate state after reload and on first route change update it to indicate that route was changed not because of a refresh.