I have a React Vite project which is set up with TanStack Router by following the docs. I have the following files:
routes/_root.tsx
import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
const SHOW_DEVTOOLS = false;
export const Route = createRootRoute({
component: RootComponent,
});
function RootComponent() {
return (
<>
{
<div className="flex gap-2 bg-white p-2 text-lg font-semibold text-slate-900">
<Link
to="/"
activeProps={{
className: "font-bold",
}}
activeOptions={{ exact: true }}
>
Title
</Link>
</div>
}
<hr />
<Outlet />
{SHOW_DEVTOOLS && <TanStackRouterDevtools position="bottom-right" />}
</>
);
}
main.tsx
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import "./index.css";
// Set up a Router instance
const router = createRouter({
routeTree,
defaultPreload: "intent",
});
// Register things for typesafety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}
const rootElement = document.getElementById("app")!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(<RouterProvider router={router} />);
}
I don't have an App.tsx since my set up didn't have it.
I want to set up TanStack Query in my project and am following the guide to set it up. It requires me to do the following:
import {
QueryClient,
QueryClientProvider,
useQuery,
} from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
However, I don't have an App.tsx. Where should I set up my QueryClientProvider
in order to get it working?
You can simply add it in your main.tsx file, just wrap QueryClientProvider around RouterPovider. A good practice in order to achieve a clear separation of concerns would be to add a providers folder and keep both router provider and query client provider inside it.