ReactMountDemo.js

import React, { useEffect } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export const RouterMountDemo = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}


function About() {
  useEffect(() => {
    console.log('About Component MOUNT')
    return () => {
      console.log('About Component UMOUNT')
    }
  }, [])
  return (
    <h1>About</h1>
  )
}

function Users() {
  useEffect(() => {
    console.log('Users Component MOUNT')
    return () => {
      console.log('Users Component UMOUNT')
    }
  }, [])
  return (
    <h1>Users</h1>
  )
}
function Home() {
  useEffect(() => {
    console.log('Home Component MOUNT')
    
    return () => {
      console.log('Home Component UMOUNT')
    }
  }, [])
  return (
    <h1>Home</h1>
  )
}