React - How to detect Page Refresh and Redirect user

Question

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";
        }
    }
}, []);

Does this help answer your question? https://stackoverflow.com/a/64967211/8690857 — Drew Reese, Aug 19 '21 at 06:46

score 1 · Accepted Answer · answered Aug 19 '21 at 06:16

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.

Thanks mate, I ended using Data Context to store the state – D.B Aug 19 '21 at 11:36 — D.B, Aug 19 '21 at 11:36

React - How to detect Page Refresh and Redirect user

1 Answers1