react-router-dom v6：useNavigate() 不工作

Question

所以我试图将添加到购物车按钮重定向到购物车屏幕，但它不起作用

ProductScreen.js
useNavigate() 重定向到链接但不显示任何内容

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

应用程序.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

现在，这就是问题所在。 据我所知，应该显示购物车屏幕，但我得到的只是一个空白屏幕。

我在控制台屏幕上遇到了这个我无法解决的问题

No routes matched location "/cart/6239f6707dfb138e900d42d7?qty=2"

我对这个很陌生，因为从上一个版本开始，一切都发生了变化。 我知道这很简单，但我被困在这里，不能再进一步了......提前感谢您的帮助

Answer 1

似乎您可能错误地使用了嵌套路由以实现您应该做的事情：

有了这个嵌套：

<Route path='/cart' element={<CartScreen />}>
  <Route path='/cart/:id?' element={<CartScreen />} />
</Route>

以上将匹配：

/cart/cart/6239f6707dfb138e900d42d7?qty=2

嵌套不应该是？：

<Route path='/cart' element={<CartScreen />}>
  <Route path='/:id?' element={<CartScreen />} />
</Route>

为了匹配：

/cart/6239f6707dfb138e900d42d7?qty=2

Answer 2

也许您可能忘记了使用<Outlet />来呈现<CartScreen />中的内容？