How to tell a page navigation from a reload with React & TypeScript

I had to write logic that branches depending on whether the user reached a page in the browser by navigating to it or by reloading it.

1
2
3
4
5
6  const navInfo = performance.getEntriesByType(
    "navigation"
  )[0] as PerformanceNavigationTiming;
  
  console.log(navInfo);
  console.log(navInfo.type);

First, here is the console.log output for navInfo.

The value I used from the navInfo data is the type property.

type follows the rules below.

• Following a link: navigate
• Going back: back_forward
• Reloading: reload

I plan to use this information to branch the logic.