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

一卷旌收千骑虏，万全身出百重围。这篇文章主要讲述如何使用自定义历史记录对象在我的主要App组件中侦听路线更改？相关的知识，希望能为你提供帮助。
我的标题出现在网站的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>【如何使用自定义历史记录对象在我的主要App组件中侦听路线更改（）】我希望这会有所帮助。