title: react-router-dom v6: useNavigate() not working
body: <p><strong>So I'm trying to redirect the Add to Cart button to Cart screen but it isn't working</strong></p>
  <p>ProductScreen.js <br />
  useNavigate() redirects to the link but doesn't display anything</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import { Link, useParams, useNavigate } from 'react-router-dom'
  import { useDispatch, useSelector } from 'react-redux'
  
  const ProductScreen = () =&gt; {
  
    const { id } = useParams()
    const navigate = useNavigate()
  
    const [ qty, setQty ] = useState(0)
  
    const dispatch = useDispatch()
  
    const productDetails = useSelector(state =&gt; state.productDetails)
    const { loading, error, product } = productDetails
  
    useEffect(() =&gt; {
      dispatch(listProductDetails(id))
    }, [dispatch])
  
    return (
      &lt;&gt;
          &lt;ListGroup.Item className='d-grid gap-2'&gt;
              &lt;Button 
                  onClick={() =&gt; navigate(`/cart/${id}?qty=${qty}`)}
                  className='btn-block' 
                  type='button' 
                  size='lg'
                  disabled={product.countInStock === 0}
               &gt; Add to Cart &lt;/Button&gt;
          &lt;/ListGroup.Item&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>CartScreen.js</p>
  <pre><code>const CartScreen = () =&gt; {
     return (
        &lt;h1&gt;Cart&lt;/h1&gt;
     )
  }
  
  export default CartScreen
  </code></pre>
  <p>App.js</p>
  <pre><code>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 = () =&gt; {
    return (
      &lt;Router&gt;
        &lt;Header /&gt;
        &lt;main className='py-3'&gt;
          &lt;Container&gt;
            &lt;Routes&gt;
              &lt;Route path='/' element={&lt;HomeScreen /&gt;} exact /&gt;
              &lt;Route path='/product/:id' element={&lt;ProductScreen /&gt;} /&gt;
              &lt;Route path='/cart' element={&lt;CartScreen /&gt;}&gt;
                &lt;Route path='/cart/:id?' element={&lt;CartScreen /&gt;} /&gt;
              &lt;/Route&gt;
            &lt;/Routes&gt;
          &lt;/Container&gt;
        &lt;/main&gt;
        &lt;Footer /&gt;
      &lt;/Router&gt;
    )
  }
  
  export default App
  </code></pre>
  <p>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.</p>
  <p>I get this one issue on console screen that I can't put my finger on</p>
  <pre><code>No routes matched location &quot;/cart/6239f6707dfb138e900d42d7?qty=2&quot;
  </code></pre>
  <p>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</p>