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

时间:2017-04-10 21:55:46

标签: javascript reactjs react-native react-router

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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