using react-router-dom v 6.我没有合适的词来表达这个问题，但问题是addToCart处理程序的url在app.js中找不到addToCart路径。例如，当我单击ID为2的产品时，我在控制台No routes matched location "/cart/2?qty=1"中得到这个错误显示。

function ProductScreen({}) {
    const [qty, setQty] = useState(1)

    const history = useNavigate()
    const match = useParams();
    const dispatch = useDispatch()
    const productDetails = useSelector(state => state.productDetails)
    const {error, loading, product} = productDetails

    useEffect(() => {
        dispatch(listProductDetails(match.id))
    }, [dispatch, match])

    const addToCartHandler = () =>{
        history(`/cart/${match.id}?qty=${qty}`)
    }
    return(
        <Button onClick={addToCartHandler} Add To Cart </Button>
    )
}

推车屏幕

const CartScreen = () => {
    const { id } = useParams();
    const { search } = useLocation();
    const [searchParms] = useSearchParams();
  
    const productId = id;
    const qty = search ? Number(search.split("=")[1]) : 1;
  

    const dispatch = useDispatch()

    useEffect(() => {
      if (productId){
        dispatch(addToCart(productId, qty))
      }
    
    }, [dispatch, productId, qty])

    
    return (
      <div>
        <h1>Add to CART</h1>
      </div>
    );
  };
  
  export default CartScreen

App.js

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/product/:id' element={<ProductScreen/>} />
        <Route path='/cart/:id' element={<CartScreen/>} />
        <Route path='/cart/' element={<CartScreen/>} />
      </Routes>
    </Router>
  );
}

将<Route path='/cart/:id' element={<CartScreen/>} />更改为<Route path='/cart/:id?' element={<CartScreen/>} />并不能解决这个问题。请注意，我测试的这两个路由的不同之处在于第二个路由的路径中的?。