ReactJS电商加入购物车功能动态路由匹配报错如何解决

问题根因 #

你的项目存在react-router家族依赖版本冲突：项目同时安装了v6版本的react-router和v5版本的react-router-dom，两个大版本API完全不兼容，且你混用了两个版本的语法：

• v6的Route组件用element属性传组件，v5的Route组件不识别该属性，仅支持component/render属性
• 商品详情页使用的useNavigate是v6专属hook，v5版本中不存在该API，对应功能用useHistory实现

排查解决步骤 #

你可以选择两种方案对齐版本，二选一即可：

方案1：对齐教程使用react-router v5版本 #

1. 先卸载冲突依赖，执行命令：

npm uninstall react-router react-router-dom

2. 安装和教程一致的v5版本：

npm install react-router-dom@5.2.0

3. 修改App.js的路由配置，替换为v5支持的写法：

<Route path="/cart/:id?" component={CartScreen} />

4. 修改商品详情页的跳转逻辑，替换v6的useNavigate为v5的useHistory：

// 原来的useNavigate替换为useHistory
let history = useHistory();
// 跳转逻辑替换
const addToCartHandler = () => {
  history.push(`/cart/${productId}?qty=${qty}`);
};

方案2：统一升级为react-router v6版本 #

1. 卸载旧依赖，执行命令：

npm uninstall react-router react-router-dom

2. 安装最新稳定版v6：

npm install react-router-dom@6

3. 修改App.js的路由外层结构，v6要求所有Route必须被Routes组件包裹（替换v5的Switch组件）：

import { Routes, Route } from 'react-router-dom';

// 路由部分写法
<Routes>
  {/* 其他路由 */}
  <Route path="/cart/:id?" element={<CartScreen />} />
</Routes>

4. （可选）优化CartScreen的查询参数获取逻辑，用v6提供的useSearchParams代替手动拆分字符串：

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

export default function CartScreen(props) {
  let params = useParams();
  const [searchParams] = useSearchParams();
  const productId = params.id;
  const qty = Number(searchParams.get('qty')) || 1;

  return (
    <div>
      <h1>Cart Screen</h1>
      <p>
        ADD TO CART : ProductID: {productId} Qty: {qty}
      </p>
    </div>
  );
}

验证 #

修改完成后重启开发服务，点击加入购物车按钮，确认路由跳转正常、CartScreen可以正常渲染参数、控制台无匹配报错即可。

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