T
TanStack•2mo ago
absent-sapphire

Question about context propagation

Say we have structure like this, 
routes/
    __root.tsx
    index.tsx
    $id/
        edit/
            index.tsx
routes/
    __root.tsx
    index.tsx
    $id/
        edit/
            index.tsx
I want to inject context from the root index.tsx (/) like this. 
createFileRoute("/")({
  context: () => ({hello: "world"}),
})
createFileRoute("/")({
  context: () => ({hello: "world"}),
})
I want to use that context in say, /1/edit/ with 
const context = Route.useRouterContext()
const context = Route.useRouterContext()
But it seems I cannot access the context variable hello. Does context only propagates to child routes when injected in layouts?
1 Reply
wee-sapphire
wee-sapphire•2mo ago
context can be accessed in parent child nesting heirarchy, also whatever you return from your beforLoad hook gets added to context from that route and all its children routes. as far as I am aware there is no context property on route definition. so if you wanna add some global state in context, return it from __root route's beforeLoad and you should be able to access it

Did you find this page helpful?