I am having trouble navigating to the checkout page. Whenever I click on the basket icon in the app, I can see that the URL is changing but the page is not, I always have to refresh the page for the navigation to happen and I am not sure why.

This is my code for App.js:

import React from "react";
import './App.css';
import Header from './Header';
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route}
from "react-router-dom";
import Checkout from "./Checkout";

function App() {
  return (
    // BEM
    <Router>
      <div className="app">
        <Switch>
          <Route path="/checkout">
            <Header />
            <h1>in checkout</h1>
            </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

I am using these version of react:

"react-dom": "^18.2.0",
"react-router": "^6.4.2",
"react-router-dom": "^5.2.0",

I tried changing the version of react router and it still did not work.

>Solution :

You’ve conflicting versions between react-router and react-router-dom, and between react-router-dom and react.

Uninstall react-router since it’s incompatible with the code you are using and the fact that react-router-dom already re-exports all of react-router.

npm un -s react-router

Then install at least react-router-dom@5.3.3 so that the router/routing can work correctly with react@18 and any React.StrictMode component you may be rendering the app into.

npm i -s react-router-dom@5

See my answer here regarding routing issue between react@18 and pre-5.3.3 versions of react-router-dom.