[Tanstack Start] Inject data into router context using React hook/context

[kaleemullah786]

I'm migrating from Tanstack Router where I've:

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProviderWithContext />
    </QueryClientProvider>
  )
}

function RouterProviderWithContext() {
  const auth = useAuth()

  return <RouterProvider router={router} context={({ auth })} />
}

how can I achieve the same in Tanstack Start?

[travisbreaks]

In TanStack Start, the router is created on the server side via createRouter in your router config file, so you can't use React hooks (like useAuth()) to inject context at creation time.

The pattern that works: use createServerFn to fetch auth state, call it in beforeLoad on your root route, and return it as route context. Child routes access it through useRouteContext() or context in their own beforeLoad.

// routes/__root.tsx
export const Route = createRootRouteWithContext()({
  beforeLoad: async () => {
    const auth = await getAuthState({ data: undefined })
    return { auth }
  },
})

This runs server-side during SSR, serializes to the client, and avoids hydration mismatches. The RouterProvider context={{ auth }} pattern from plain @tanstack/react-router doesn't apply in Start because the router initialization happens before React renders.

[kaleemullah786]

Thanks @travisbreaks. My project is completely client-first which I'll potentially be deploying to a CDN. I'm bit confused how can I build a fully client-side application as I'm using a seperate backend.

Thanks again for your support 🙏

[travisbreaks]

If your app is fully client-side with a separate backend and you're deploying to a CDN, TanStack Start may not be the right tool here. Start is built around SSR/SSG with server functions.

For a pure SPA, plain @tanstack/react-router (without Start) is the better fit, and your original pattern works as-is:

function RouterProviderWithContext() {
  const auth = useAuth()
  return <RouterProvider router={router} context={{ auth }} />
}

RouterProvider accepts a context prop directly. It gets merged into the router context for all routes. No router.update() dance needed. Your beforeLoad hooks access it normally through ({ context }) => ....

Start does support SPA-only mode, but you'd be pulling in SSR abstractions without using the server. If you later need server-side rendering or server functions, that's when Start earns its weight.