react-router-dom v6: useNavigate() not working - reactjs

Question

So I'm trying to redirect the Add to Cart button to Cart screen but it isn't working
ProductScreen.js
useNavigate() redirects to the link but doesn't display anything
import React, { useState, useEffect } from 'react'
import { Link, useParams, useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
const ProductScreen = () => {
const { id } = useParams()
const navigate = useNavigate()
const [ qty, setQty ] = useState(0)
const dispatch = useDispatch()
const productDetails = useSelector(state => state.productDetails)
const { loading, error, product } = productDetails
useEffect(() => {
dispatch(listProductDetails(id))
}, [dispatch])
return (
<>
<ListGroup.Item className='d-grid gap-2'>
<Button
onClick={() => navigate(`/cart/${id}?qty=${qty}`)}
className='btn-block'
type='button'
size='lg'
disabled={product.countInStock === 0}
> Add to Cart </Button>
</ListGroup.Item>
</>
)
}
CartScreen.js
const CartScreen = () => {
return (
<h1>Cart</h1>
)
}
export default CartScreen
App.js
import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import { Container } from 'react-bootstrap'
import Footer from './components/Footer'
import Header from './components/Header'
import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'
import CartScreen from './screens/CartScreen'
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<Routes>
<Route path='/' element={<HomeScreen />} exact />
<Route path='/product/:id' element={<ProductScreen />} />
<Route path='/cart' element={<CartScreen />}>
<Route path='/cart/:id?' element={<CartScreen />} />
</Route>
</Routes>
</Container>
</main>
<Footer />
</Router>
)
}
export default App
Now, this is where the problem lies. As far as I know, the cart screen should be displayed but all I get is a blank screen.
I get this one issue on console screen that I can't put my finger on
No routes matched location "/cart/6239f6707dfb138e900d42d7?qty=2"
I am very new to this coz everything has changed from the last version. I know this is very simple but I'm stuck here and can't go any further... Thanks for your help in advance

Answer 1

It seems like you maybe be using nested routes incorrectly in order to achieve what you are supposed to:
With this nesting:
<Route path='/cart' element={<CartScreen />}>
<Route path='/cart/:id?' element={<CartScreen />} />
</Route>
The above will match:
/cart/cart/6239f6707dfb138e900d42d7?qty=2
Shouldn't the nesting be?:
<Route path='/cart' element={<CartScreen />}>
<Route path='/:id?' element={<CartScreen />} />
</Route>
in order to to match:
/cart/6239f6707dfb138e900d42d7?qty=2

Answer 2

Perhaps you may have forgotten to use <Outlet /> to render content in <CartScreen />?