reactjs - 如何将 react-ga 与 HashRouter 一起使用？

Question

我一直在尝试将 Google Analytics 与我的 React 应用程序集成，该应用程序使用 react-router-dom v4 中的 HashRouter。但它根本不起作用提示:

Warning: < HashRouter> ignores the history prop. To use a custom history, use import { Router } instead of import { HashRouter as
Router }.

同样的问题已在 Github 上发布: HashRouter not responding to History但尚未提供解决方案。

我必须在不使用任何 HOC 的情况下坚持使用 HashRouter 进行项目。 这可能吗？

我目前的实现:

ReactGA.initialize('UA-XXXXXXXX-X');
const history = createHistory()
history.listen((location, action) => {
  ReactGA.set({ page: location.pathname });
  ReactGA.pageview(location.pathname);
});

ReactDOM.render((
    <HashRouter history={history}>
        <Switch>
            <Route path="/" name="App" component={App} />
        </Switch>
    </HashRouter>
),document.getElementById('root'));

Answer 1

演示项目中提供的示例代码也使用了 HashRouter。
如此处所见；
https://github.com/react-ga/react-ga/blob/master/demo/app/Router.jsx

使用 HOC，withTracker，不是必须的。它只是在每个页面上轻松插入跟踪触发器。如果您在自己的页面组件中实现相同的代码，您可以获得相同的结果。

然后，您需要将以下代码添加到您要手动跟踪的每个组件；

  const trackPage = (page) => {
    ReactGA.set({
      page
    });
    ReactGA.pageview(page);
  };

    componentDidMount() {
      const page = this.props.location.pathname;
      trackPage(page);
    }

    componentWillReceiveProps(nextProps) {
      const currentPage = this.props.location.pathname;
      const nextPage = nextProps.location.pathname;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }