React 路由中基于 URL 下划线动态切换组件并强制重渲染的解决方案

当使用 react router 的 `navlink` 导航时，相同路径模式下的路由不会自动重渲染，导致基于 url 特征（如下划线 `_`）的组件判断失效；可通过 `uselocation()` 配合 `key` 属性强制路由重新挂载来解决。

在 react Router v6 中， 默认复用已挂载的组件实例——即使 element 内容依赖于 URL 动态判断（如通过 window.location.href.includes(‘_’) 区分商品页与购物车页），只要路径参数匹配模式未变（例如 /novosibirsk/spetstekhnika 和 /novosibirsk/test-33_2736 均匹配 /:alias/:fullAlias?/:maxAlias?），React 就不会触发重新渲染，导致 Catalog 与 CartProduct 组件无法正确切换。

根本原因在于：window.location.href 是全局状态，不被 React 响应式系统追踪；且 NavLink 导航属于客户端路由跳转，不触发页面刷新，因此条件判断逻辑不会自动更新。

✅ 正确解法：利用 useLocation() Hook 获取当前路由位置对象，并将其作为 的 key，强制 React 在 location 变化时卸载并重建该路由组件树：

import { useLocation } from 'react-router-dom';  // 在 Route 外层（如 Routes 包裹的组件内）调用 const location = useLocation();  // 然后在 Route 中设置 key }>       {location.pathname.includes('_') ? (                ) : (                )}        } />

⚠️ 注意事项：

• 避免使用 location.pathname 替代 window.location.href：前者更可靠、可预测，且与 React Router 生命周期一致；window.location.href 在服务端渲染（SSR）或测试环境中可能不可用或不同步。
• key={location.key} 是推荐做法：location.key 是 React Router 自动生成的唯一标识符，每次导航均变化；而 key={location} 会因对象引用不变导致失效（需深比较），不推荐。
• 逻辑前置更清晰：将判断逻辑移入 element 内部（而非依赖副作用），确保每次渲染都基于最新 location 计算，提升可维护性与可测试性。
• 若需进一步解耦，可封装为自定义 Hook（如 useIsCartPath()），增强复用性。

总结：路由组件的“伪重载”并非靠模拟刷新实现，而是通过 key 触发 React 的 reconciliation 机制。结合 useLocation()，即可在保持单页体验的同时，精准响应 URL 微小差异（如 _ 符号），实现语义化、可预测的动态路由渲染。