How to fix react router routes?

Question

I am working on this React project for training purposes. Anyways, I've set up two pages; the Home page and the Checkout page, with a Link on the Header component to get me from Home to Checkout, this is the Header Link code :

<Link to="/checkout" className="header__contactsBtns__cart flex ju-co al-it width-auto height-auto">
    <BsCart4 className="header__contactsBtns__cart__icon" />
    <h1>0</h1>
</Link>

and this is my App.js file :

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import "./Assets.css";
import Header from "./Components/Header/Header.js";
import Footer from "./Components/Footer/Footer.js";
import Home from "./Pages/Home.js";
import Checkout from "./Pages/Checkout.js";
function App() {
  return (
    <div className="App">
      <Router>
        <div className="App">
          <Header />
          <Switch>
            <Route path="/checkout" component={Checkout} />
            <Route exact path="/" component={Home} />
          </Switch>
          <Footer />
        </div>
      </Router>
    </div>
  );
}

export default App;

My problem is that when I click on the Link that should take me to Checkout page the url changes to the correct path like this : http://localhost:3000/checkout but nothing happens, and when I refresh the browser It takes me to the Checkout page. Ps: I tried to remove the Switch and It didn't solve it.

Thank you.