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? stackoverflow.com/a/64967211/8690857 — Drew Reese
– Drew Reese, Commented Aug 19, 2021 at 6:46

Harsh Patel · Accepted Answer · 2021-08-19 06:16:21Z

1

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.

answered Aug 19, 2021 at 6:16

Harsh Patel

6,87810 gold badges44 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D.B Over a year ago

Thanks mate, I ended using Data Context to store the state

Collectives™ on Stack Overflow

React - How to detect Page Refresh and Redirect user

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related