App useEffect not firing with react router

Question

I am trying to add some analytics to my app. At the top level (within App.js) I have a fairly simple layout- a navbar, and outlet (for react router), and a footer. When navigating through the page, the outlet is updated to show my content- shouldn't this call the componentDidUpdate method? I am only seeing my useEffect hook fire after the first render.

If this is operating as expected, is there a better location to place a hook that will be called as a user navigates the page?

(partial) contents of app.js:

function App() {

  useEffect(() => {
    console.log(window.location.pathname)
  })

  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <Navbar />
        <Outlet />
        <Footer />
      </ThemeProvider>
    </div>
  );
}

index.js:

ReactDOM.render(
  <React.StrictMode>
    <SimpleReactLightbox>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
            <Route path="/" element={<Landing />} />
            <Route path="/portfolio" element={<PortfolioGrid />} />
            <Route path="/portfolio" element={<Portfolio />}>
              <Route path=":portfolioId" element={<Portfolio />} />
            </Route>
            <Route path="/aboutme" element={<AboutMe />} />
            <Route path="/downloads" element={<Downloads />}>
              <Route index element={<DefaultDownload />} />  
              <Route path=":downloadId" element={<MyDownloads />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </SimpleReactLightbox>
  </React.StrictMode>,
  document.getElementById('root')
);