如何在没有任何第三方库的情况下为React路由器Dom创建一个钩子？

Question

我需要一个React路由器的钩子，每当用户导航到页面时，分析数据就会发送到我们的服务器。

---

这需要在每个页面上，所以我想这个抽象的网络呼叫远离开发人员，所以这一切的背景happends。我不希望开发人员必须手动将分析事件放在他们创建的每条路线上。我需要某种反应路由器的中间件。

我们正在使用react-router-dom图书馆。我浏览了源代码，但找不到任何方法来挂钩事件;或任何事件的概念。

我看到他们是react-router-hook但它看起来像该包取决于react-router包，我们不使用。老实说，我不介意为简单的行为引入一个新的外部库。

我想我总是可以从react-router-dom导入本地Route对象，并为它创建一个包装，这将允许我实现自己的行为。我宁愿不扩展第三方库，除非它是绝对必要的。

如何在没有任何第三方库的情况下为React路由器Dom创建一个钩子？

Answer 1

包装是一种选择，你命名它。

不过，我会去我顶（<Application />）组件检测路由变化和发送事件钩。

componentWillReceiveProps(nextProps) { 
    if (this.props.location !== nextProps.location) { 
    sendEvent(); // location has changed, do your work 
    } 
} 

PS。根据您的设置，您可能需要打包withRouter以使其知道位置更改。