Refresh page on react-route change-CodePudding

I have a function in a component that needs to load some variables when the page is fully loaded. It seems to work fine when you reload the page manually, but as soon as you use a NavLink to navigate to the page, the code doesn't run, because the page didn't reload properly. I have tried using <BrowserRouter forceRefresh={true}> but it doesn't seem to do anything at all.

What I need to know is how to reload the page when the route changes via NavLink.

// App.js
function App() {
  return (
    <BrowserRouter forceRefresh={true}>
      <Routes>
        <Route path="/" element={<Homepage />} exact/>
        <Route path="/page2" element={<Page2/>} exact/>
      </Routes>
    </BrowserRouter>
  );
}

I have tried adding additional hooks to the pages to reload it when they load, but that just sends it into an infinite loading loop.

Every other solution I have tried is either outdated, does the loading loop, or does nothing at all.

CodePudding user response：

You can add onClick={() => window.location.reload()} on <NavLink/>