I would like to know how i can set up google analytcis in a multiple page react app that uses react router. After a lot of looking around i discovered that my react-ga solution wasn't woking because the id wasn't UA- but G- and google will stop tracking UA next year so switching to universal isn't an option now. I did find react-ga4 and react-ga-4 but i don't which to choose nor how to initialize and set up with react router. Here's my App.js function with the Router
function App() {
return (
<div className={ window.location.pathname =='/' ? "App" : "App AppOV"}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Landing/>} />
<Route path="/quiz" element={<Quiz/>} />
<Route path="/caja-de-herramientas" element={<Caja/>} />
<Route path="/guia-autocorrecion" element={<GuiaAuto/>} />
<Route path="/caja-de-herramientas/sustantivos" element={<Sustantivos/>} />
<Route path="/caja-de-herramientas/pronombres" element={<Pronombres/>} />
<Route path="/caja-de-herramientas/expresiones" element={<Expresiones/>} />
<Route path="/caja-de-herramientas/nuevos-morfemas" element={<NuevosMorfemas/>} />
<Route path="/que-sentido-tiene-el-lenguaje-inclusivo" element={<Texto/>} />
<Route path="/acerca-del-proyecto" element={<Acerca/>} />
<Route path="/caja-de-herramientas/herramientas" element={<Herramienta/>} />
</Routes>
</BrowserRouter>
</div>
);
}