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

Question

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

这需要在每个页面上，所以我想从开发人员那里抽象出这个网络调用，所以这一切都发生在后台。我不希望开发人员必须在他们创建的每个Route上手动放置分析事件。我需要一些反应路由器的中间件。

我们目前正在使用react-router-dom库。我查看了源代码，但是我找不到任何挂钩事件的方法;或任何事件的概念。

我看到他们是react-router-hook，但看起来这个包取决于我们不使用的react-router包。说实话，我并不为引入一个新的外部库而感到高兴，因为它应该是一个简单的行为。

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

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

Answer 1

Wrapper是一个选项，你可以命名。

但是，我会在我的顶级（<Application />）组件中找一个钩子来检测路线变化并发送事件。

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

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