react-route-dom won't alert or console.log

So I am trying to following the example I was given by react-router to get the page history.

Basically what I am wanting to do is when a user comes to the website via say example.com/life and that is the users first visit I need a custom script to run.

But the issue is I can't even get the consul.log or alert function to run.

The code I was told to use.

    class Comp extends React.Component {
      componentDidUpdate(prevProps) {
        // will be true
        const locationChanged =
          this.props.location !== prevProps.location;
    
          console.error("this is where the location would run");
          alert("test"+locationChanged);
    
      }
    }

And how I implemented it.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import withTracker from './tracker';
import Header from './Header'; 
import Footer from './components/Footer'; 
import NavBar from './Navbar'; 
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Show from './components/Shows';
import Programs from './components/Programs';
import News from './components/News';
import Events from './components/Events';
import EventListing from './components/EventListing';
import NewsTopic from './components/NewsTopic';
import NewsArtical from './components/NewsArtical';
import Competitions from './components/Competitions';
import Stations from './components/pages/Stations';
import OurApp from './components/pages/Downloadapp';
import NoMatch from './components/NoMatch';
import Contact from './components/Contact';
/* INSERT COMPETITIONS*/
import TheVault from './components/competitions/TheVault';
/* END COMPETITIONS */

import Advertise from './components/Advertise';
import Songwars from './components/Songwars';
import Admin from './components/Admin';
import PrivacyPolicy from './components/pages/Privacypolicy';

const theme = createMuiTheme({
  palette: {
    primary1Color: "#fff",
    primary2Color: "#c62828",
    accent1Color: "#ffffff",
    pickerHeaderColor: "#fce4ec",
  },
});

class Comp extends React.Component {
  componentDidUpdate(prevProps) {
    // will be true
    const locationChanged =
      this.props.location !== prevProps.location;

      console.error("this is where the location would run");
      alert("test"+locationChanged);

    // INCORRECT, will *always* be false because history is mutable.
    /*const locationChanged =
      this.props.history.location !== prevProps.history.location;

      alert(locationChanged);
      */
  }
}


function App() {
  return (
      <Router component={Comp} >
        <ThemeProvider theme={theme}>
        <Header/>
        <NavBar />
        <Switch>
                  <Route path="/" exact component={withTracker(Home)} />
                  <Route path="/about" component={withTracker(About)} />
                  <Route exact path="/shows" component={withTracker(Show)} />
                  <Route path="/shows/:name" component={withTracker(Programs)} />
                  <Route exact path="/news" component={withTracker(News)} />
                  <Route exact path="/events" component={withTracker(Events)} />
                  <Route path="/events/:URL" component={withTracker(EventListing)} />
                  <Route exact path="/competitions" component={withTracker(Competitions)} />
                  <Route path="/competitions/thevault" component={withTracker(TheVault)} />
                  <Route path="/news/category/:URL" component={withTracker(NewsTopic)} />
                  <Route path="/news/:URL" component={withTracker(NewsArtical)} />
                  <Route exact path="/contact" component={withTracker(Contact)} />
                  <Route exact path="/advertise" component={withTracker(Advertise)} />
                  <Route exact path="/songwars" component={Songwars}/>
                  <Route exact path="/privacypolicy" component={withTracker(PrivacyPolicy)}/>
                  <Route exact path="/downloadapp" component={withTracker(OurApp)} />
                  <Route exact path="/stations" component={withTracker(Stations)} />
                  <Route exact path="/admin" component={withTracker(Admin)} />
                  <Route component={withTracker(NoMatch)} />
        </Switch> 

        <Footer/>
    </ThemeProvider>
    </Router>
  );
}


export default App;

Wondering what am I doing wrong?