Logging Route Transitions

Provide an example of how to log route transitions for analytic purposes by implementing an interceptor that logs every route change.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useEffect } from 'react';

class AnalyticsService {
  static logPageView(url) {
    console.log(`Page view logged: ${url}`); // Replace with actual analytics service

function App() {
  useEffect(() => {
    // Log initial page load
  }, []);

  return (
      <Route render={({ location }) => {
        // Log every route change
        return null;
      }} />
        {/* Define your routes here */}
        <Route path='/home' component={HomePage} />
        <Route path='/about' component={AboutPage} />
        //... other routes
This code sets up a React Router and logs every route transition. It imports the necessary components from 'react-router-dom'. An `AnalyticsService` class with a static `logPageView` method is created to handle the logging, which you would replace with your actual analytics service. The `App` component sets up the router with a special route that uses the `render` prop to execute the logging side-effect on every route change. It also logs the initial page load using a React `useEffect` hook.