TanStackT
TanStack•7mo ago•
27 replies
clean-aquamarine

How do I get context set in root route?

interface RouterContext {
  player?: ReturnType<typeof usePlayer>
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: RootComponent,
})

function RootComponent() {
  // I want context here
  return (
    <>
      {/* <TopBar /> */}
      <SidebarProvider>
        <AppSidebar />
        <main>
          <Outlet />
        </main>
      </SidebarProvider>
      <TanStackRouterDevtools position='bottom-right' />
    </>
  )
}


I am setting context per the docs that fetches but I can't find any documentation on how to actually use this context in a component. I see that you can use it in load and 
beforeLoad
, but nothing about passing it or using it in the route's component.

Am I thinking of it as more of a state management solution than it is?
Was this page helpful?