javascript - 如何在没有任何第三方库的情况下为 React Router Dom 创建钩子(Hook)？

Question

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

<小时/>

这需要出现在每个页面上，因此我想将这个网络调用从开发人员中抽象出来，以便这一切都在后台发生。我不希望开发人员必须在他们创建的每条路线上手动放置分析事件。我需要某种用于 react 路由器的中间件。

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

我看到他们是 react-router-hook但看起来该包依赖于我们不使用的 react-router 包。老实说，我对仅仅为了简单的行为而引入新的外部库并不感到兴奋。

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

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

Answer 1

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

但是，我会在顶部 ( <Application /> ) 组件中添加一个钩子(Hook)来检测路由更改并发送事件。

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

PS。根据您的设置，您可能需要换行 withRouter使其了解位置变化。