修复 React Query 未提供 QueryClientProvider 导致的运行时错误
- main.tsx 中增加 QueryClientProvider 包裹 RouterProvider
- router.tsx 的 getRouter() 改为返回 { router, queryClient } 对象
- 确保 useQuery 在组件树中能正常获取 QueryClient 上下文
This commit is contained in:
+5
-2
@@ -1,14 +1,17 @@
|
|||||||
// 应用入口:样式在 ./styles.css(Tailwind v4 + design token),路由见 ./router.tsx
|
// 应用入口:样式在 ./styles.css(Tailwind v4 + design token),路由见 ./router.tsx
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
|
import { QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { RouterProvider } from "@tanstack/react-router";
|
import { RouterProvider } from "@tanstack/react-router";
|
||||||
import { getRouter } from "./router";
|
import { getRouter } from "./router";
|
||||||
import "./styles.css";
|
import "./styles.css";
|
||||||
|
|
||||||
const router = getRouter();
|
const { router, queryClient } = getRouter();
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<RouterProvider router={router} />
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</QueryClientProvider>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|||||||
+1
-1
@@ -20,5 +20,5 @@ export const getRouter = () => {
|
|||||||
defaultPreloadStaleTime: 0,
|
defaultPreloadStaleTime: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
return router;
|
return { router, queryClient };
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user