如何使用自定义历史记录对象在我的主要App组件中侦听路线更改？

Posted 2021-04-13

我的标题出现在网站的95％页面中，因此我将其安装在主要的App组件中。对于其余5％的页面，尽管我需要将其删除。

我想出了一种好方法，那就是根据当前路由将状态从true更改为false，并且该状态将确定是否安装标头。

起初，我尝试仅使用window.location.href作为useEffect依赖项，但这似乎不起作用。我已经阅读了有关侦听历史记录位置的选项，但是我一直收到Cannot read property 'history' of undefined。我觉得这可能是因为我使用的是自定义历史记录组件，还是因为我试图在主App组件中使用它？不确定。

这是我的历史记录对象：

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

我像这样在Router中使用它：

<Router history={history}>

CONDITIONAL COMPONENT

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

这是我尝试收听的方式，其中history是我的自定义历史记录对象const MyHistory = useHistory（history）

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

答案

您正在尝试在提供程序Router的组件中使用useHistory。为了使useHistory工作，它需要在层次结构中的较高位置有一个Router。

因此，您可以用Router包装App组件，例如

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

或者因为您定义了自定义历史，所以可以直接使用它而无需使用useHistory

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

另一答案

这是我控制应用程序中每条路线更改的方式。我创建了一个侦听pathname

给定的useLocation属性的组件

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;
}

然后将组件放入<Router>中>

<BrowserRouter>
   <AppScrollTop />
   <Switch>
     <Route path="/login" component={Login} />
   </Switch>
</BrowserRouter>
我希望这会有所帮助。