本文讲解如何在 react router v6 中，通过 `uselocation` 配合 `key` 属性强制路由组件重渲染，解决因 url 路径相似（如仅含 `_` 符号差异）导致 `
在使用 React Router 时，一个常见误区是：当多个路由共用同一 path 模式（例如 /novosibirsk/:alias/:fullAlias?/:maxAlias?），仅靠 URL 字符串特征（如是否包含 _）判断渲染 <Catalog /> 还是 <CartProduct />，却忽略了 React 的组件复用机制——相同路径下，Router 默认复用已挂载的组件实例，不会触发重新挂载或状态重置。这会导致即使 window.location.href 变化，<Suspense> 内部的条件判断逻辑仍沿用旧状态，尤其在 <NavLink> 导航时表现明显（无整页刷新，但组件未响应式更新）。
正确做法是：利用 useLocation() 获取当前路由位置对象，并将其作为 <Route> 的 key 值。由于 location 对象在每次导航后都会生成新引用（即使路径参数结构一致），设置 key={location} 可强制 React 卸载并重新挂载该 <Route> 对应的整个元素树，从而确保 <Suspense> 和内部条件渲染逻辑被完整执行：
import { useLocation } from 'react-router-dom';
// 在 Route 外层（如 Layout 或 Routes 包裹组件中）调用
const location = useLocation();
// 在 Routes 内使用
<Route
key={location} // ✅ 关键：强制重渲染
path={`/${cityAlias}/:alias/:fullAlias?/:maxAlias?`}
element={
<Suspense fallback={<Loader />}>
{window.location.href.includes('_') ? (
<CartProduct getIdPage={setIdProductPage} />
) : (
<Catalog />
)}
</Suspense>
}
/>⚠️ 注意事项：
- key 必须作用于 <Route> 元素本身（而非其 element 内部），否则无法触发 Router 层级的重新匹配与挂载；
- 不推荐依赖 window.location.href 做业务判断——它耦合全局状态且在 SSR 环境下不可用。更健壮的方式是解析 useParams() 或 useLocation().pathname 后进行逻辑判断，例如：
const { alias } = useParams(); const shouldRenderCart = alias?.includes('_'); - 若需深度控制加载/切换行为，可结合 useNavigate + useEffect 实现导航守卫，或升级至 createBrowserRouter 配合 loader 函数预处理数据。
总结：路由组件不自动重渲染，不是 bug，而是性能优化设计。当业务逻辑强依赖 URL 微小差异时，主动用 key={location} 是标准、轻量且符合 React 哲学的解决方案。
