当使用 react router 的 `navlink` 导航时，相同路径模式下的路由不会自动重渲染，导致基于 url 特征（如下划线 `_`）的组件判断失效；可通过 `uselocation()` 配合 `key` 属性强制路由重新挂载来解决。
在 React Router v6 中，
根本原因在于：window.location.href 是全局状态，不被 React 响应式系统追踪；且 NavLink 导航属于客户端路由跳转，不触发页面刷新，因此条件判断逻辑不会自动更新。
✅ 正确解法：利用 useLocation() Hook 获取当前路由位置对象，并将其作为
import { useLocation } from 'react-router-dom';
// 在 Route 外层（如 Routes 包裹的组件内）调用
const location = useLocation();
// 然后在 Route 中设置 key
⚠️ 注意事项：
- 避免使用 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 微小差异（如 _ 符号），实现语义化、可预测的动态路由渲染。
