引入谷歌分析

.env.example

@@ -1 +1,2 @@
 VITE_APP_URL=
+VITE_G_ID=

package.json

@@ -10,18 +10,22 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.3",
+    "add": "^2.0.6",
     "antd": "^5.3.2",
     "axios": "^1.3.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "redux": "^4.2.1",
     "sort-by": "^1.2.0",
-    "web-vitals": "^3.3.0"
+    "web-vitals": "^3.3.0",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.tsx

@@ -1,31 +1,43 @@
-import { useRoutes } from "react-router-dom";
+import { Suspense, useEffect } from "react";
+import ReactGA from "react-ga";
+import { useLocation, useRoutes } from "react-router-dom";
 import routes from "./routes";
 import "./App.scss";
-import { Suspense } from "react";
 import LoadingPage from "./pages/loading";
 import { user } from "./api/index";
 import { getToken } from "./utils/index";
 import { useDispatch } from "react-redux";
 import { loginAction } from "./store/user/loginUserSlice";
 
-function App() {
-  const Views = () => useRoutes(routes);
+const G_ID = import.meta.env.VITE_G_ID || "";
+if (G_ID) {
+  ReactGA.initialize(G_ID);
+}
+
+const App = () => {
   const dispatch = useDispatch();
-  const getUser = () => {
+  const Views = () => useRoutes(routes);
+
+  if (getToken()) {
     user.detail().then((res: any) => {
       const data = res.data;
       dispatch(loginAction(data));
     });
-  };
-  if (getToken()) {
-    getUser();
   }
 
+  const location = useLocation();
+  useEffect(() => {
+    if (!G_ID) {
+      return;
+    }
+    ReactGA.pageview(location.pathname + location.search);
+  }, [location]);
+
   return (
     <Suspense fallback={<LoadingPage />}>
       <Views />
     </Suspense>
   );
-}
+};
 
 export default App;