Как использовать реактив-га с HashRouter?

Question

Я пытался интегрировать Google Analytics с моим приложением React, которое использует HashRouter из response-router-dom v4. Но это просто не работает, жалуясь:

Предупреждение: игнорирует реквизит истории. Использовать кастом история, используйте import { Router } вместо import { HashRouter as Router }.

Тот же вопрос был опубликован на Github здесь: HashRouter не отвечает на историю , но пока не найдено решений.

Я должен придерживаться HashRouter для проекта без использования HOC. Возможно ли это?

Моя текущая реализация:

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);
      }
    }