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' />
    </>
  )
}

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

load

and

beforeLoad

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?

TanStack•9mo 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' />
    </>
  )
}

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

load

and

beforeLoad

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?

How do I get context set in root route?

Similar Threads

How do I get context set in root route?

Similar Threads

Similar Threads

Similar Threads