Stopping React from running computations in subpage after leaving that subpage

Question

I have a React app using react-three-fiber, and I use wouter to navigate between pages like so:

    <a.group {...props}>
      <Switch location={location} {...props}>
        <Route path="/">
          <LandingPagev/>
        </Route>
        <Route path="/home">
          <HomePage />
        </Route>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route path="/tickets">
          <TixPage />
        </Route>
        <Route path="/people">
          <PeoplePage />
        </Route>
        <Route path="/lines">
          <LinesPage />
        </Route>
      </Switch>
    </a.group>

this runs fine on launch, but I noticed that after entering and leaving a page all the computation in that page keeps running. Ie if I console.log('about') in <AboutPage />, it prints when I'm in the about page but keeps printing once I navigate away. Some of my components are pretty complex, so this slows down the website considerably after visiting a few pages. How can I prevent react from running these unnecessary computations?

I tried doing conditional rendering, ie replacing <LandingPagev/> with {location == '\landing' && <LandingPagev/>} in the Switch, but that had no effect.