Chragement d'un contenu sur react

Bonjours à tous, je débute sur react et je teste les routeurs.

Grace à ce tuto:

https://www.ibrahima-ndaw.com/fr/blog/the-complete-guide-to-react-router/#quest-ce-que-le-routage

j'ai put concevoir une premier application mais le contenu de la page s'affiche que lorsque on rafraichi la page. Je voudrait effectivement que le contenu s'affiche lors du click.

Cordialement:

voicu le code de App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
} from 'react-router-dom'
 
import './App.css';
 
import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';
 
 
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <header>
            <section>
              <h1> react-starter </h1>
              <h2> (React version 18.0.2) </h2>
            </section>
            <nav>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
              </ul>
            </nav>
          </header>
          <main>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route exact path="*" component={NotFound} />
            </Switch>
          </main>
        </div>
      </Router >
    );
  }
}
 
export default App;