Javascript 如何使用自定义历史对象在主应用程序组件中侦听路由更改？

我有一个标题出现在我网站95%的页面上，所以我把它挂在我的主应用程序组件上。对于其他5%的页面，尽管我需要它消失

我认为这样做的一个好方法是根据当前路由将状态从true更改为false，该状态将决定头是否挂载

起初，我尝试将

window.location.href

用作

useffect

依赖项，但这似乎不起作用。我已经读过关于侦听历史记录位置的选项，但我一直得到

无法读取未定义的属性“history”。我想可能是因为我在使用自定义历史组件，或者是因为我试图在我的主应用程序组件中这样做？不确定

这是我的历史记录对象：

import { createBrowserHistory } from 'history'; 
export default createBrowserHistory();

我在我的
路由器中使用它，如下所示：

<Router history={history}>

CONDITIONAL COMPONENT

  <Switch>
    ...routes
  </Switch>
</Router>

您试图在呈现
路由器的组件中使用useHistory，该组件是一个提供程序。为了让useHistory正常工作，它需要在层次结构的更高层有一个路由器

因此，要么你用路由器包装应用程序组件，就像

export default () => (
    <Router history={history}><App /><Router>
)

您试图在呈现
路由器的组件中使用useHistory，该组件是一个提供程序。为了让useHistory正常工作，它需要在层次结构的更高层有一个路由器

因此，要么你用路由器包装应用程序组件，就像

export default () => (
    <Router history={history}><App /><Router>
)

这就是我在应用程序中控制每条路线更改的方式。我创建了一个组件，用于侦听

然后我将组件放入



我希望这能有所帮助。
这就是我在应用程序中控制每次路线更改的方法。我创建了一个组件，用于侦听

然后我将组件放入



我希望这有帮助。
你的路线是在应用程序组件中定义的吗？@ShubhamKhatri是的，我在哪里写了
…路线
你的路线是在应用程序组件中定义的吗？@ShubhamKhatri是的，我在哪里写了
…路线
useEffect(() => {
      return history.listen((location) => {
          console.log(`You changed the page to: ${location.pathname}`)
      })
  },[])

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function AppScrollTop() {
  const { pathname } = useLocation();

  useEffect(() => {
      console.log(`You changed the page to: ${pathname}`)
  }, [pathname]);

  return null;
}

<BrowserRouter>
   <AppScrollTop />
   <Switch>
     <Route path="/login" component={Login} />
   </Switch>
</BrowserRouter>