当使用动态路由参数（如 :category 和 :product）时，若路径结构冲突（例如同级参数名相同或嵌套无区分），react router 会复用已有路由匹配，导致 url 更新但组件未重新挂载或渲染。
当使用动态路由参数（如 :category 和 :product）时，若路径结构冲突（例如同级参数名相同或嵌套无区分），react router 会复用已有路由匹配，导致 url 更新但组件未重新挂载或渲染。
这个问题的根本原因在于 路由路径定义缺乏语义区分。在你提供的路由配置中：
<route path="/home/categories"><route path=":category" element="{<Category"></route>}>
<route path=":product" element="{<Product"></route>} />
</route>
看似 :category 和 :product 是两级动态段，但实际上——它们都属于同一层级的动态参数路径，且 :category 的匹配规则是「匹配 /home/categories/ 后的任意非斜杠字符串」，因此：
- /home/categories/electronics → 匹配 :category="electronics"，渲染
- /home/categories/123 → 同样匹配 :category="123"，仍渲染
，根本不会进入子路由 :product
更关键的是：当从一个产品页（如 /home/categories/shoes/101）跳转到另一个产品页（如 /home/categories/shoes/102）时，父级路由
✅ 正确做法是：为不同资源类型设计有明确语义的静态路径前缀，避免纯动态参数歧义。例如：
<browserrouter><routes><route path="/home/categories">
{/* ✅ 使用静态关键字 + 动态参数，清晰分层 */}
<route path=":categoryName" element="{<Category"></route>}>
{/* ✅ 子路径以 '/products/' 显式标识，避免与 :categoryName 冲突 */}
<route path="products/:productId" element="{<Product"></route>} />
</route></routes></browserrouter>
对应导航链接也需同步更新：
<navlink to="{`/home/categories/${product.category}/products/${product.id}`}">
{product.name}
</navlink>
? 补充建议：
- 在
组件内，务必使用 useParams() 获取 productId，并配合 useEffect 监听其变化，主动触发数据重载； - 若需强制组件在参数变更时重新挂载（如避免状态残留），可为
添加 key 属性： <route path="products/:productId" element="{<Product"></route>} key={useParams().productId} // 使路由变化时 React 视为新元素 /> - 永远避免在同级路由中使用多个无前缀的 :param（如 :a 和 :b），因为 Router 无法区分先后顺序，将始终优先匹配第一个。
总结：路由设计不是“能跑通就行”，而是要兼顾可预测性、可维护性与 React 的渲染机制。用语义化路径（如 /categories/:cat/products/:id）替代模糊的嵌套动态段，是规避此类问题最稳健的实践。
