当 React Router 的嵌套路由中使用相同命名的动态参数（如 :category 和 :product）时，由于路径匹配优先级和参数捕获逻辑，会导致深层导航（如产品页跳转到另一产品页）仅更新 URL 而不触发组件重新渲染。
当 react router 的嵌套路由中使用相同命名的动态参数（如 `:category` 和 `:product`）时，由于路径匹配优先级和参数捕获逻辑，会导致深层导航（如产品页跳转到另一产品页）仅更新 url 而不触发组件重新渲染。
问题根源在于你的路由配置中，两个嵌套 <Route> 均使用了同名的动态段参数：
<Route path="/home/categories">
<Route path=":category" element={<Category />}> {/* ← 此处 :category 匹配任意非空字符串 */}
<Route path=":product" element={<Product />} /> {/* ← 此处 :product 实际从未被单独识别 */}
</Route>
</Route>由于 React Router v6+ 的路径匹配是贪婪且自上而下的，/home/categories/shoes/123 会被第一层 path=":category" 完全匹配——shoes/123 整体作为 :category 的值传入 <Category />，而内层 :product 根本不会被解析，导致 <Product /> 组件永远不会被挂载或更新。
✅ 正确做法是：为不同层级设计语义清晰、互不重叠的静态路径前缀，避免动态参数“吞噬”后续路径：
<BrowserRouter>
<Routes>
<Route path="/home/categories">
{/* ✅ 静态子路径 + 动态参数，确保层级可区分 */}
<Route path=":category" element={<Category />}>
{/* ✅ 显式声明 /product/ 前缀，分离 category 和 product 的路径空间 */}
<Route path="product/:id" element={<Product />} />
</Route>
</Route>
</Routes>
</BrowserRouter>对应地，搜索栏导航需同步更新为符合新路径结构：
<NavLink to={`/home/categories/${product.category}/product/${product.id}`}>
{product.name}
</NavLink>⚠️ 注意事项：
- 动态参数（如 :id）必须位于路径末尾或后接 /，不可与同级其他动态段并列（如 /:a/:b 在无分隔符时无法可靠区分）；
- 若需在 <Category /> 中复用 :category 参数，可通过 useParams() 获取；而 <Product /> 中则使用 useParams<{ id: string }>() 获取 id；
- 切勿省略 element 属性直接写 <Route><Category /></Route>（v6+ 不支持该写法）；
- 开发时建议启用 React Router 的 <RouterProvider> + createBrowserRouter 方式，并开启 basename 和 future.v7_normalizeFormMethod 等稳定特性以提升可维护性。
通过语义化路径设计，既能保证路由精准匹配，又能确保参数按预期注入对应组件，彻底解决“URL 变了但组件不渲染”的典型陷阱。
