React Router v6中如何匹配路由参数并展示商品名称？

1. 修正路由配置错误 #

你的路由里/cart路径错误指向了ProductScreen，应改为对应的购物车组件（比如CartScreen），避免逻辑混淆：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path='/' element={<HomeScreen />} exact />
      <Route path='/cart' element={<CartScreen />} />
      <Route path='/product/:id' element={<ProductScreen />} />
    </Route>
  )
)

2. 调整ProductScreen组件获取路由参数的方式 #

React Router v6不再向组件传递match等props，需使用useParams钩子获取URL中的id参数，同时增加异常处理避免报错：

import { useParams } from 'react-router-dom';
import products from '../products';

function ProductScreen() {
  const { id } = useParams();
  // 使用严格相等判断，避免类型不匹配导致的查找失败
  const product = products.find(p => p._id === id);

  // 处理商品不存在的情况
  if (!product) {
    return <div>该商品不存在</div>;
  }

  return (
    <div>
      {product.name}
    </div>
  );
}

export default ProductScreen;

关键注意点 #

• React Router v6 API变化：必须通过useParams()钩子获取路由参数，旧的match.params写法已被移除
• 严格相等判断：确保商品数据中的_id与路由参数id类型一致（如均为字符串或数字），避免因类型转换导致匹配失败
• 异常兜底：当传入无效ID时，提前判断并返回提示，防止访问product.name时因product为undefined抛出错误

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