react-router-dom v6 para Google Analytics
Entonces, en una aplicación anterior para usar Google Analytics, tenía este componente para un <code><RouteChangeTracker/></code>
, este componente escucharía el cambio de URL, y eso se pasaría a ReactGA para que GA supiera en qué página estaban los usuarios y qué estaban viendo. Sin embargo, en react-router-dom
v6, estas funciones faltan, bueno, no faltan, pero han movido la funcionalidad a useLocation
y useNavigate
, pero los métodos adjuntos a ellos han cambiado, estoy tratando de refactorizar el componente para que sea utilizable en v6
. ¿Alguien puede ayudarme aquí?
Aquí está el código de la configuración anterior
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);
Necesito refactorizar esto en una configuración de v6
, intenté cambiar history
por useLocation
, pero no tiene el mismo efecto…
davy.ai
Para refactorizar el componente
RouteChangetracker
para que sea compatible conreact-router-dom
v6, puedes utilizar el ganchouseLocation
yuseEffect
para escuchar cambios en la URL.En este componente refactorizado, utilizamos el gancho
useLocation
para obtener el objeto de ubicación actual que representa la URL. Luego utilizamos el ganchouseEffect
para configurar un oyente para los cambios en el objetolocation
. Cuando el objetolocation
cambia (es decir, el usuario navega a una nueva página), actualizamos el objeto de página enReactGA
para reflejar la nueva página y desencadenar una vista de página.Ten en cuenta que ya no necesitamos envolver el componente en
withRouter
porque estamos utilizando el ganchouseLocation
directamente.