如何收听导航事件？答案

【问题标题】：How to listen to navigate event?如何收听导航事件？
【发布时间】：2022-01-14 15:14:08
【问题描述】：

问题：当用户在同一页面内导航时，我想使用基于 href 变化的回调函数。

例如，我想在用户导航出组件时使用回调（将 href 从 localhost:3000/user 更改为 localhost:3000/about）

我试过了

【问题讨论】：

如果你使用 react 你只需要在组件加载时使用一个 useEffect ......你的环境设置是什么？
示例 href 不是“在同一页面内”。您可以拥有相同的应用程序 (SPA)，但它们是不同的“路线”。你可以使用 React 路由器来处理这些，这是一个专门为这种情况设计的工具。
@Michael 我正在尝试在组件卸载时使用它。我不认为听窗口事件是要走的路。我一直在尝试将 div ref 与 useRef 一起使用
您是否尝试过使用 useffect 清理功能？ ( 卸载时执行的函数？
@Michael 实际上，清理功能比事件监听器工作得更好。十分感谢你的帮助！我不知道为什么我没有想到。

【解决方案1】：

您可以使用 useEffect 清理函数在组件卸载时触发逻辑。

useEffect(() => {
        effect
        return () => {
            cleanup
        }
    }, [input])

【讨论】：