应用程序 useEffect 不使用 React 路由器触发

Question

我正在尝试向我的应用程序添加一些分析。在顶层（在 App.js 内）我有一个相当简单的布局——一个导航栏、一个插座（用于反应路由器）和一个页脚。在页面中导航时，outlet 会更新以显示我的内容——这不应该调用 componentDidUpdate 方法吗？我只在第一次渲染后看到我的 useEffect 挂钩。

如果这按预期运行，是否有更好的位置来放置将在用户浏览页面时调用的挂钩？

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')
);

Answer 1

我不知道为什么不使用依赖项并记录 window.location 对象不起作用，但使用当前匹配的 location 对象似乎起作用。使用 useLocation 挂钩并添加 location 作为 useEffect 挂钩的依赖项。

示例：

import { Outlet, useLocation } from "react-router-dom";

function App() {
  const location = useLocation();

  useEffect(() => {
    console.log(location.pathname);
  }, [location]);

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

应用程序 useEffect 不使用 React 路由器触发

App useEffect not firing with react router

reactjs

react-router

react-router-dom

react-hooks

use-effect