React Router DOM 監聽路由變化

Question

我的 React 應用程序位於一個 java struts 項目中，其中包括一個 header。該 header 中有一個特定元素會根據所命中的某些路由而變化。

為此，在定義我的路由的位置更改路由時收聽會簡單得多。 而不是在每條路線上都這樣做。

這是我的

應用程序.js

import {
  BrowserRouter as Router,
  Route,
  useHistory,
  useLocation,
  Link
} from "react-router-dom";

const Nav = () => {
  return (
    <div>
      <Link to="/">Page 1 </Link>
      <Link to="/2">Page 2 </Link>
      <Link to="/3">Page 3 </Link>
    </div>
  );
};

export default function App() {
  const h = useHistory();
  const l = useLocation();

  const { listen } = useHistory();

  useEffect(() => {
    console.log("location change");
  }, [l]);

  useEffect(() => {
    console.log("history change");
  }, [h]);

  h.listen(() => {
    console.log("history listen");
  });

  listen((location) => {
    console.log("listen change");
  });

  return (
    <Router>
      <Route path={"/"} component={Nav} />
      <Route path={"/"} component={PageOne} exact />
      <Route path={"/2"} component={PageTwo} exact />
      <Route path={"/3"} component={PageThree} exact />
    </Router>
  );
}

單擊 Nav 組件中的鏈接時，不會命中任何控制台日志。 有沒有解決的辦法？

我有一個CodeSandbox來測試這個問題。

Answer 1

請記住， react-router-dom將導航 object 傳遞到 React 樹下。

您正在嘗試訪問 App 組件中的歷史記錄和位置，但是 App 組件“上方”沒有任何內容可以為其提供歷史記錄或位置。

如果您改為將useLocation和useHistory放在 PageOne/PageTwo/PageThree 組件中，它會按預期工作。

更新了您的代碼和框：

https://codesandbox.io/s/loving-lamarr-bzspg?fontsize=14&hidenavigation=1&theme=dark