React Router+React Query：App组件自定义hook触发未设置QueryClient错误求助

你遇到的错误是因为React-Query的自定义hook必须在QueryClientProvider的上下文范围内调用。当前你的useSoftware()是在App组件的顶层执行的，而QueryClientProvider是在App的return里才渲染的——这意味着调用hook的时候，Provider还没生效，自然获取不到QueryClient实例。

方案1：将hook调用移到Provider内部的组件中 #

把useSoftware()的调用从App组件移到被QueryClientProvider包裹的子组件里，比如AppLayout或者页面组件：

修改后的App.jsx：

function App() {
  // 移除这里的useSoftware调用
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      <BrowserRouter>
        <GlobalStyles />
        <Routes>
          <Route element={<AppLayout />}>
            <Route index element={<MainPage replace to="home" />} />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}

export default App;

在AppLayout中使用hook：

import { useSoftware } from './path-to-your-hook';
import { Outlet } from 'react-router-dom';

function AppLayout() {
  const { isLoading, software } = useSoftware();

  // 处理加载状态
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="app-layout">
      {/* 在这里使用software数据渲染导航、侧边栏等布局内容 */}
      <Outlet />
    </div>
  );
}

export default AppLayout;

方案2：将QueryClientProvider提升到App组件外层 #

如果必须在App组件中使用useSoftware()，可以把QueryClientProvider移到入口文件（比如index.js）中，让它包裹整个App组件：

修改index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// 初始化QueryClient
const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
);

此时App.jsx就可以正常调用hook了：

function App() {
  const { isLoading, software } = useSoftware();

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <BrowserRouter>
      <GlobalStyles />
      <Routes>
        <Route element={<AppLayout />}>
          <Route index element={<MainPage replace to="home" />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

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