React路由如何配置可选id参数并正确跳转至CartScreen组件

你当前使用的是React Router v6版本（代码中使用了v6专属的<Routes>组件），按以下方式配置即可实现需求：

路由配置修正 #

首先移除无效属性：v6版本路由默认是精确匹配逻辑，<Route>上的exact属性已经被废弃，直接删除即可。
v6原生支持通过?标记可选路径参数，你写的/cart/:id?规则本身是合法的，可以同时匹配/cart（无id参数）、/cart/[id值]（带id参数）两种路径，路径后拼接的查询字符串（比如?qty=xx）不会参与路由匹配，不会导致匹配失败。
修正后的完整路由代码：

<Container>
  <Routes>
    <Route path="/" element={<HomeScreen/>} />
    <Route path="/product/:id" element={<ProductScreen/>}/>
    <Route path="/cart/:id?" element={<CartScreen/>} />
  </Routes>
</Container>

CartScreen页面参数获取 #

在购物车页面通过官方提供的Hook分别获取路径参数和查询参数即可，不要手动解析地址栏内容：

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

const CartScreen = () => {
  // 获取可选路径id，无id时该值为undefined
  const { id } = useParams();
  // 获取查询参数qty
  const [searchParams] = useSearchParams();
  const qty = Number(searchParams.get('qty')) || 1;

  // 后续业务逻辑
  return (
    // 页面内容
  )
}

跳转逻辑无需调整 #

你现有的加入购物车跳转逻辑完全符合要求，无需修改：

const addToCart = () => {
  navigate(`/cart/${id}?qty=${qty}`)
}

执行跳转后生成的地址（比如/cart/123?qty=2）会被路由规则正常捕获，正确渲染CartScreen组件。

特殊情况兼容：如果你使用的是v5及更早版本的React Router（这类版本使用<Switch>而非<Routes>组件），可选参数?写法不生效，只需要为CartScreen注册两个路径规则即可：

<Switch>
  {/* 其他路由 */}
  <Route path="/cart/:id" element={<CartScreen/>} />
  <Route path="/cart" element={<CartScreen/>} />
</Switch>

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