将React Router页面视图发送到Firebase Analytics

Question

我的应用使用React Router的BrowserRouter。如何跟踪页面浏览量并将其发送到Google Firebase分析（我已经安装了firebase-analytics.js）。

Answer 1

只需在<BrowserRouter>内部的任何位置呈现以下组件：

import { useLocation } from "react-router-dom";
import { useEffect } from "react";

function FirebaseAnalytics() {
    let location = useLocation();
    useEffect(() => {
        const analytics = window.firebase && window.firebase.analytics;
        if (typeof analytics === "function") {
            analytics().setCurrentScreen(location.pathname + location.search);
            analytics().logEvent("page_view");
        }
    }, [location]);
    return null;
}