Отправка представлений страниц React Router в Firebase Analytics

Question

Мое приложение использует React Router's BrowserRouter. Как я могу отслеживать просмотры страниц и отправлять их в Google Firebase Analytics (я уже установил 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") {
            const page_path = location.pathname + location.search;
            analytics().setCurrentScreen(page_path);
            analytics().logEvent("page_view", { page_path });
        }
    }, [location]);
    return null;
}