No routes matched location for cartItems app-CodePudding

There is a routing problem with using react-router-dom v6 to maintain "cart items" functionality in my app. So it doesn't show cart items when I click on the "cart" link in the header navbar. In contrast, it works and displays the list when I try to add a new item to the cart.

Note: It shows the cart items when the URL path is such this pattern 'http://localhost:3000/cart/1?qty=2' and doesn't show in the case of 'http://localhost:3000/cart'!

Please follow the code...

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import CartScreen from './screens/CartScreen';
import ProductScreen from './screens/ProductScreen';
 
function App() {
  return (
    <>
      <Header/>
      <Routes>
        <Route path="/" element={<HomeScreen />} exact />
        <Route path="/product/:id" element={<ProductScreen />} />
        <Route path="/cart/:productid?" element={<CartScreen />}/>
      </Routes>
    );
  </>
}