本文讲解如何在 react router 中通过 uselocation 配合 key 属性实现路由路径变化时强制重新渲染组件，解决因 url 仅含 _ 符号差异（如 /novosibirsk/spetstekhnika 与 /novosibirsk/test-33_2736）导致的组件不更新问题。
在 React Router v6+ 中，当两个路由路径模式完全相同（如均匹配 /:city/:alias/:fullAlias?/:maxAlias?），但仅靠 URL 字符串中是否含下划线 来区分渲染逻辑时，单纯依赖 window.location.href.includes('') 判断存在明显缺陷：使用 NavLink 导航时，React Router 会复用已有 Route 实例，不会触发组件卸载/重挂载，导致 Catalog 和 CartProduct 组件无法正确切换。
根本原因在于：
✅ 正确解法是利用 key 属性强制路由重渲染：
React 中，当组件的 key 发生变化时，React 会销毁旧组件并创建新实例。我们将 useLocation().key（或 pathname）作为
以下是推荐实现（适配 React Router v6.4+）：
import { useLocation, Route, Routes, Suspense } from 'react-router-dom';
// 在父级 Routes 中使用
function AppRoutes() {
const location = useLocation(); // ✅ 获取当前 location 对象
return (
{/* 关键：为 Route 添加 key，使其随 URL 变化而重建 */}
);
}? 注意事项：
- 避免直接读取 window.location：它在服务端渲染（SSR）或严格模式下可能不可靠，且与 React Router 的路由状态不同步；应始终优先使用 useLocation() 提供的 pathname。
- key={location.key} 是最优选：location.key 是 React Router 为每次导航生成的唯一字符串，比 pathname 更能精确反映“是否为新导航”，尤其在带搜索参数或哈希变化时更健壮。
- 不要在 element 内部做副作用判断：如将 useEffect + window.location 放在 Catalog 或 CartProduct 内部处理跳转，会导致竞态、重复请求或 UX 卡顿；路由层的声明式控制更清晰、可预测。
- 若需更高可维护性，建议将逻辑进一步封装为自定义 Hook（如 useIsCartPath()），便于测试与复用。
总结：路由组件的动态切换不应依赖副作用或全局状态判断，而应通过 React 的 key 机制与 Router 的 location 状态协同驱动。添加 key={location.key} 是轻量、标准且符合 React 哲学的解决方案，能彻底解决 NavLink 下同类路径间 _ 特征切换失败的问题。
