es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

react-router-dom v6 para Google Analytics

29 Jul, 2023 Programación

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…

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para refactorizar el componente RouteChangetracker para que sea compatible con react-router-dom v6, puedes utilizar el gancho useLocation y useEffect para escuchar cambios en la URL.

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

const RouteChangeTracker = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname);
  }, [location]);

  return <div></div>;
};

export default RouteChangeTracker;

    En este componente refactorizado, utilizamos el gancho useLocation para obtener el objeto de ubicación actual que representa la URL. Luego utilizamos el gancho useEffect para configurar un oyente para los cambios en el objeto location. Cuando el objeto location cambia (es decir, el usuario navega a una nueva página), actualizamos el objeto de página en ReactGA 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 gancho useLocation directamente.

Comments are closed.