React/Typescript使用history.push跳转后组件不重新渲染不触发AJAX请求问题

问题原因 #

• React Query缓存Key未绑定动态路由参数：当前useQuery使用固定字符串chartInfo作为全局唯一缓存key，和路由参数id无关联。只要该key对应的数据在你设置的staleTime: 5000（5秒）有效期内，React Query会直接复用本地缓存，不会发起新的AJAX请求。
• 同路由组件参数更新默认复用实例：/details/:id路由始终对应Component2组件，切换不同id跳转时，React Router会复用现有组件实例而非重新挂载，不会触发组件初始化阶段的请求逻辑。

解决方案 #

核心修复（推荐） #

将useQuery的缓存Key修改为包含id的数组，确保不同id对应独立的缓存条目，id变化时自动触发新请求：

// Component2中修改useQuery调用
const { data, status } = useQuery(['chartInfo', id], fetchData, {
  staleTime: 5000,
});

该方案符合React Query的设计规范，不同id的请求数据会独立缓存，既不会重复发起无效请求，也能在id切换时自动拉取新数据。

可选增强配置 #

如果需要每次进入Component2都强制刷新数据，无视staleTime限制，可添加refetchOnMount配置：

const { data, status } = useQuery(['chartInfo', id], fetchData, {
  staleTime: 5000,
  refetchOnMount: 'always' // 每次组件挂载都强制重新请求
});

兜底方案 #

如果需要彻底避免组件复用带来的逻辑异常，可在路由配置中给Component2添加和id绑定的key，强制切换id时重新挂载组件：

// 路由配置中修改Route渲染逻辑
<Route path="/details/:id" render={(props: RouteComponentProps<any>) => <Component2 key={props.match.params.id} {...props}/>} />

内容的提问来源于stack exchange，提问作者Sole