How can you handle route changes and perform side effects such as analytics tracking in React Router

Question

Can you tell me How can you handle route changes and perform side effects, such as analytics tracking, in React Router?

Answer 1

You can handle route changes and perform side effects like analytics tracking using the useLocation hook inside a useEffect.

import { useEffect } from "react";

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

function RouteChangeTracker() {

  const location = useLocation();

  useEffect(() => {

    // Perform side effect, e.g., send pageview to analytics

    window.gtag('config', 'GA_TRACKING_ID', {

      page_path: location.pathname,

    });

  }, [location]);


  return null; // No UI rendering

}