在 React Router v6 中，需使用 useParams Hook 替代已移除的 match.params 属性；同时需注意参数类型为字符串、处理未匹配情况，并采用严格相等比较以确保健壮性。
在 react router v6 中，需使用 `useparams` hook 替代已移除的 `match.params` 属性；同时需注意参数类型为字符串、处理未匹配情况，并采用严格相等比较以确保健壮性。
React Router v6 彻底移除了历史版本中通过 props.match.params 访问路由参数的方式，转而采用基于 Hooks 的函数式 API。要从类似 /product/:id 这样的动态路径中提取参数值，必须在目标组件（如 ProductScreen）中调用 useParams() Hook。
以下是标准实现方式：
import { useParams } from 'react-router-dom';
import products from '../products';
function ProductScreen() {
const { id } = useParams(); // ✅ 正确：解构出字符串类型的 id
// ⚠️ 注意：useParams 返回的 id 永远是字符串，而 product._id 可能是 number 或 ObjectId
// 推荐统一转为字符串后进行严格比较（===），避免隐式类型转换导致意外匹配
const product = products.find((p) => String(p._id) === id);
// ? 必须处理未找到的情况：find() 在无匹配时返回 undefined
if (!product) {
return <div className="error">⚠️ 未找到 ID 为 "{id}" 的商品</div>;
}
return (
<div className="product-detail">
<h1>{product.name}</h1>
<p>价格：¥{product.price}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11404" title="Reactivation Specialist · 流失召回"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Reactivation Specialist · 流失召回" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11404" title="Reactivation Specialist · 流失召回">Reactivation Specialist · 流失召回</a>
<p>适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p</p>
</div>
<a href="/xiazai/skill11404" title="Reactivation Specialist · 流失召回" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>描述：{product.description}</p>
</div>
);
}
export default ProductScreen;? 关键注意事项：
- useParams() 只能在由 Route 渲染的组件内部调用（即必须是路由出口组件），不可在普通工具函数或自定义 Hook 中直接使用（除非该 Hook 被路由组件调用）；
- 所有 URL 参数均为字符串类型，切勿直接用 == 或与数字比较（例如 p._id == id），否则可能因类型强制转换引发逻辑错误（如 '1' == 1 为 true，但 '01' == 1 为 false）；
- 始终校验 product 是否存在——Array.prototype.find() 在无匹配时返回 undefined，直接访问 product.name 将导致运行时错误；
- 若产品数据来自异步请求（如 API），应结合 useEffect 和加载/错误状态管理，本例假设 products 是同步导入的静态数组。
✅ 最佳实践建议：在大型项目中，可进一步封装参数解析逻辑（如 useProductById(id) 自定义 Hook），提升复用性与可测试性。
