当 React Router 的嵌套路由中使用相同命名的动态参数（如 :category 和 :product）时，由于路径匹配优先级和参数捕获逻辑，会导致深层导航（如产品页跳转到另一产品页）仅更新 URL 而不触发组件重新渲染。

当 react router 的嵌套路由中使用相同命名的动态参数（如 `:category` 和 `:product`）时，由于路径匹配优先级和参数捕获逻辑，会导致深层导航（如产品页跳转到另一产品页）仅更新 url 而不触发组件重新渲染。

问题根源在于你的路由配置中，两个嵌套 均使用了同名的动态段参数：

<route path="/home/categories"><route path=":category" element="{<Category"></route>}> {/* ← 此处 :category 匹配任意非空字符串 */}
    <route path=":product" element="{<Product"></route>} /> {/* ← 此处 :product 实际从未被单独识别 */}
  </route>

由于 React Router v6+ 的路径匹配是贪婪且自上而下的，/home/categories/shoes/123 会被第一层 path=":category" 完全匹配——shoes/123 整体作为 :category 的值传入 ，而内层 :product 根本不会被解析，导致 组件永远不会被挂载或更新。

✅ 正确做法是：为不同层级设计语义清晰、互不重叠的静态路径前缀，避免动态参数“吞噬”后续路径：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

<browserrouter><routes><route path="/home/categories">
      {/* ✅ 静态子路径 + 动态参数，确保层级可区分 */}
      <route path=":category" element="{<Category"></route>}>
        {/* ✅ 显式声明 /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 参数，可通过 useParams() 获取；而 中则使用 useParams() 获取 id；
• 切勿省略 element 属性直接写 （v6+ 不支持该写法）；
• 开发时建议启用 React Router 的 + createBrowserRouter 方式，并开启 basename 和 future.v7_normalizeFormMethod 等稳定特性以提升可维护性。

通过语义化路径设计，既能保证路由精准匹配，又能确保参数按预期注入对应组件，彻底解决“URL 变了但组件不渲染”的典型陷阱。