React Query报错‘未设置QueryClient’的解决求助

核心问题分析 #

你的代码存在两个关键问题：

• React Router 结构不规范：<Login/> 对应的 <Route> 直接置于 <BrowserRouter> 下，未被包裹在 <Routes> 组件内部，导致组件渲染异常，无法正确获取 QueryClientProvider 的上下文。
• 模块顶层打印 QueryClient 不准确：在模块顶层打印 queryClient 时，实例尚未完成初始化，因此输出空对象。

具体修复步骤 #

1. 修正 React Router 路由结构

React Router v6 强制要求所有路由必须放在 <Routes> 组件内部，将所有路由统一整合：

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Login />} />
                <Route path="dashboard" element={<Dashboard />} />
                <Route path="profile" element={<Profile />} />
                <Route path="settings" element={<Settings />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

2. 正确验证 QueryClient 实例

将 console.log(queryClient) 移至 App 组件内部，此时实例已完成初始化，可输出完整结构：

function App() {
    console.log(queryClient); // 此处将输出完整的 QueryClient 实例
    // 路由代码...
}

3. 确认依赖包正确性

确保安装并导入的是新版 @tanstack/react-query，而非旧版 react-query：

• 检查安装包：执行 npm list @tanstack/react-query 确认版本
• 核对导入语句：

  import { QueryClient, QueryClientProvider, useMutation } from "@tanstack/react-query";
  

完成以上修改后，<Login/> 组件即可正常获取 QueryClient 上下文，useMutation() 不再抛出错误。

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