react-query搭配react-router导航请求正常但新数据不渲染如何解决

问题根因 #

请求正常触发但视图未更新，通常由两个配置问题导致：

1. react-query默认开启structuralSharing（结构共享）特性，会对新旧请求返回的数据做浅对比，若判定数据结构无变化，即使拿到新的接口返回也不会更新状态，自然不会触发组件重渲染。
2. 如果查询依赖路由动态参数（例如Component2对应路由/details/:id的id值），但未将动态参数加入查询键（Query Key），react-query会复用旧的查询状态，导致视图不更新。

修复方案 #

按优先级依次调整即可：

1. 单查询关闭结构共享（优先验证）

在useQuery的配置项中添加structuralSharing: false，强制请求完成后直接更新状态：

// Component1修改示例
const { data: result, status } = useQuery('info', fetchAll, {
    staleTime: 0,
    structuralSharing: false, // 新增该行配置
});

Component2的useQuery调用做同样修改即可。

2. 动态查询绑定参数到查询键

如果Component2的查询依赖路由id参数，必须将id加入查询键数组，参数变化时react-query会自动生成新的查询实例更新状态：

// Component2示例
import { useParams } from 'react-router-dom';

const { id } = useParams<{id: string}>();
const fetchDetail = async () => {
    const res = await fetch(`https:xxxxxx/xxxxx/${id}`);
    return res.json();
};

// 将id加入查询键数组
const { data: detail, status } = useQuery(['detail', id], fetchDetail, {
    staleTime: 0,
    structuralSharing: false
});

3. 全局配置兜底（可选）

如果项目所有查询都需要关闭结构共享，直接在QueryClient初始化时全局配置，无需每个useQuery单独设置：

// 路由组件内的QueryClient初始化修改
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 0,
      structuralSharing: false,
    }
  }
})

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