react-router-dom v6报“No routes matched location /shopping-cart”问题求助

我是React Router DOM v6的新手，点击"加入购物车"按钮跳转时，链接带参数但路由匹配有问题，不知道怎么修复。

当前代码情况 #

路由配置（App.js） #

import React from 'react';
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import ShoppingCartScreen from './screens/ShoppingCartScreen';

const App = () => {
  return (
    <Router>
      <Container>
        <Routes>
          <Route path='/' element={<HomeScreen />} exact />
          <Route path='/product/:id' element={<ProductScreen />} />
          <Route path='shopping-cart/:id?' element={<ShoppingCartScreen />} />
        </Routes>
      </Container>
    </Router>
  );
}

export default App;

ProductScreen 跳转逻辑 #

import React, { useState, useEffect } from 'react';
import { Link, useParams, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux'
import { Button } from 'react-bootstrap';

const ProductScreen = () => {
  const [quantity, setQuantity] = useState(1)
  let params = useParams();
  let navigate = useNavigate()

  const addToCardHandler = () => {
    navigate(`/shopping-cart/${params.id}?quantity=${quantity}`)
  }

  return (
    <div>
      <Button 
        className='btn-success'
        type='button'
        onClick={addToCardHandler}
      > 
        Add to Cart 
      </Button>
    </div>
  )
}

Header 导航组件 #

import React from 'react';
import {Container, Navbar, Nav } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

const Header = () => {
  return (
    <header>
      <Navbar expand='lg' variant='dark' bg='primary' collapseOnSelect>
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>Azakamede</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="navbarScroll" />
          <Navbar.Collapse id="navbarScroll">
            <Nav
              className="me-auto my-2 my-lg-0"
              style={{ maxHeight: '100px' }}
              navbarScroll
            >
              <LinkContainer to="/">
                <Nav.Link><i className="fas fa-house"></i>Products</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/shopping-cart">
                <Nav.Link ><i className='fas fa-shopping-cart'></i>Cart</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/login">
                <Nav.Link ><i className="fas fa-user"></i>Login</Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar> 
    </header>
  );
}

export default Header

ShoppingCartScreen 页面 #

import React from 'react'

const ShoppingCartScreen = () => {
  return (
    <div>
      <h1> My Cart </h1>
    </div>
  )
}

export default ShoppingCartScreen

我怀疑问题出在addToCardHandler函数里，之前在React Router DOM v5里我是这么写的：

const addToCardHandler = () => {
  history.push(`/shopping-cart/${params.id}?quantity=${quantity}`)
}

修复方案 #

1. 修正路由路径 #

首先你的购物车路由缺少开头的斜杠，应该改为：

<Route path='/shopping-cart/:id?' element={<ShoppingCartScreen />} />

路径必须以/开头，否则会被当成相对路径，导致匹配失败。

2. 优化跳转逻辑（两种可选方式） #

方式一：保留路径参数+查询参数

跳转写法可以保持原逻辑，但确保路径正确：

const addToCardHandler = () => {
  navigate(`/shopping-cart/${params.id}?quantity=${quantity}`)
}

方式二：统一用查询参数（更灵活）

如果不需要把id放在路径里，可以简化路由为：

// App.js 路由修改
<Route path='/shopping-cart' element={<ShoppingCartScreen />} />

跳转逻辑改为：

const addToCardHandler = () => {
  navigate(`/shopping-cart?id=${params.id}&quantity=${quantity}`)
}

3. 在购物车页面获取参数 #

不管用哪种方式，都需要在ShoppingCartScreen中正确读取参数：

• 如果是路径参数+查询参数：

import React from 'react'
import { useParams, useSearchParams } from 'react-router-dom';

const ShoppingCartScreen = () => {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const quantity = searchParams.get('quantity');

  return (
    <div>
      <h1> My Cart </h1>
      {id && <p>商品ID: {id}, 数量: {quantity}</p>}
    </div>
  )
}

export default ShoppingCartScreen

• 如果只用查询参数：

import React from 'react'
import { useSearchParams } from 'react-router-dom';

const ShoppingCartScreen = () => {
  const [searchParams] = useSearchParams();
  const productId = searchParams.get('id');
  const quantity = searchParams.get('quantity');

  return (
    <div>
      <h1> My Cart </h1>
      {productId && <p>商品ID: {productId}, 数量: {quantity}</p>}
    </div>
  )
}

export default ShoppingCartScreen

4. 确认导航链接匹配 #

Header中的LinkContainer to="/shopping-cart"是正确的，和修正后的路由路径一致，无需修改。

内容的提问来源于stack exchange，提问作者fyardlest