React：通過公共組件中的 history.push 跟蹤歷史更改

Question

我有一個 Layout 組件，它包裝了我的應用程序的其余部分。 默認路由是一個包含多個按鈕的頁面，實現為一個名為 NavButton 的小組件，它使用history.push轉到新路由。 然后在我的 Layout 組件中，有 2 個按鈕，但其中一個應該根據我們當前導航到的路線而改變。 所以當我們在主頁面上時，按鈕應該顯示“更改代碼”，但在任何其他頁面上，它應該顯示“返回”。 我通過以下方式嘗試過：

布局.tsx：

interface ILayoutProps {
  children: ReactNode;
}

const Layout: React.FC<ILayoutProps> = ({ children }) => {
  const currentRoute = useLocation();

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

  const logout = () => {
    console.log('logout');
  };

  return (
    <div>
      <div>{children}</div>
      <Grid container spacing={2}>
        <Grid item xs={6}>
          {currentRoute.pathname === '/' ? (
            <NavButton displayName="Change Code" route="/change-code" variant="outlined" />
          ) : (
            <Button variant="outlined" color="primary" fullWidth>
              Back
            </Button>
          )}
        </Grid>
        ...
      </Grid>
    </div>
  );
};

export default Layout;

導航按鈕.tsx：

interface NavButtonProps {
  displayName: string;
  route: string;
  variant?: 'text' | 'outlined' | 'contained';
}

const NavButton: React.FC<NavButtonProps> = ({ displayName, route, variant = 'contained' }) => {
  const history = useHistory();

  const navigatePage = () => {
      history.push(route);
      // Also tried it like this:
      // setTimeout(() => history.push(route), 0);
  };

  return (
    <Button
      variant={variant}
      color="primary"
      onClick={() => navigatePage()}
      fullWidth
    >
      {displayName}
    </Button>
  );
};

export default NavButton;

所以在我的布局中，我試圖用useLocation()鈎子來跟蹤位置的變化，但是當一個按鈕被按下，因此history.push(route)被調用時，它不會被布局中的鈎子檢測到. 我也嘗試使用useHistory()鈎子並在其上調用listen()方法，但同樣的問題。 另外，我的路由器是一個 BrowserRouter，不確定這是否有幫助......我在這里錯過了什么？

Answer 1

所以問題是我的 App 組件是這樣定義的：

<Layout>
    <Routes />
</Layout>

我的路線是這樣的：

<BrowserRouter>
    <Switch>
        <Route ...>
        ....
    </Switch>
</BrowserRouter>

我的布局中的useLocation()鈎子不起作用，因為它不是我的 BrowserRouter 的子項。 把它改成這樣，代碼就可以工作了。

我唯一覺得奇怪的是，在我的應用程序中，我沒有收到無效掛鈎調用的錯誤，但在沙箱中我收到了。 也許我需要升級我的 React 包...