用于谷歌分析的 react-router-dom v6答案

【问题标题】：react-router-dom v6 for google analytics用于谷歌分析的 react-router-dom v6
【发布时间】：2021-12-27 21:15:49
【问题描述】：

所以在之前使用 Google Analytics 的应用程序中，我有一个用于<RouteChangeTracker/> 的组件，该组件将监听 url 更改，并将其传递给 ReactGA，以便 GA 知道用户在哪个页面上查看。但是在react-router-dom v6 中，这些功能缺失了，嗯，没有缺失，但是他们已经将功能移到了useLocation 和useNavigate，但是附加到它们的方法已经改变，我试图重构组件以在@ 中使用987654325@这里有人可以帮帮我吗？

这是之前设置的代码

import React from "react";
import { withRouter } from "react-router-dom";
import ReactGA from "react-ga";

const RouteChangetracker = ({ history }) => {
  history.listen((location, action) => {
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname);
  });

  return <div></div>;
};

export default withRouter(RouteChangetracker);

我需要将其重构为 v6 设置，我尝试更改 useLocation 的历史记录，但效果不一样..

【问题讨论】：

标签： reactjs google-analytics react-router-dom

【解决方案1】：

这应该可以使用useLocation 来实现，甚至还有一个example 与ga 一起实现。

这个新的钩子会随着历史的每次变化而更新，从那里可以提取pathname。

看到这个stackblitz example。从导航菜单或“返回主页”按钮导航时

let location = useLocation();

React.useEffect(() => {
  console.log({ location });
}, [location]);

【讨论】：