How can I access the context from the component function?

[sawa-ko]

I am currently defining a default context when creating the router, but I have no way to access it through the component. What I have to do is use the loader function, and then use the hook useLoaderData inside the component. It is very cumbersome to do and repetitive and I would like that through the arguments passed to the component function I get the context instead of doing all those steps above each time and so I also avoid using unnecessary hooks.

const router = createRouter({
  // eslint-disable-next-line react/prop-types
  Wrap: ({ children }) => {
    return <ConfigProvider theme={{ cssVar: true }}>{children}</ConfigProvider>;
  },
  context: {
    theme: theme.getDesignToken({ cssVar: true }),
  },
  routeTree,
});

export const Route = createRootRouteWithContext<{ theme: AliasToken }>()({
  component: Root,
});

export function Root() {
  return (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  );
}

// Current solution
export const Route = createFileRoute('/')({
  component: () => {
    return (
      <>
        <HomePage />
      </>
    );
  },
  loader: ({ context }) => {
    return {
      ...context,
    };
  },
});

export function HomePage() {
  const x = Route.useLoaderData();

  return (
    <div>
      <h3>Welcome Home! {x.theme.blue}</h3>
    </div>
  );
}

// Better solution
export const Route = createFileRoute('/')({
  component: () => {
    return (
      <>
        <HomePage />
      </>
    );
  }
});

export function HomePage({ context: x }) {

  return (
    <div>
      <h3>Welcome Home! {x.theme.blue}</h3>
    </div>
  );
}

[TkDodo]

It's available on matches, so useRouterState or useMatches should give you the context for each match:

https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context

[mindaugasb-isense]

But it's not exactly the same.

[schiller-manuel]

not the same as what?

[sawa-ko]

It's not working:

[sawa-ko]

@TkDodo

[sawa-ko]

I see that with useMatches it comes in the loaderData property, but as I mentioned, isn't there a way to do it without hooks?

Let the component that renders the path receive that as props.

[TkDodo]

components that render on a route don't receive any props. You get loader data with useLoaderData(). You get path params with useParams(). And you can get context with useMatches() and then access .context. It's even shown in your image ...

[dylanhu7]

@TkDodo Just curious - what is the reason that the component of the route doesn't receive loaderData (and potentially other stuff like context) as props? Is it just to have a unified API through the more flexible hooks instead of having both DI through props and through hooks?

[TkDodo]

if you inline the component, sure, this sounds nice, but once you extract it you need to type the props and lose type inference. And you need the hooks anyways, otherwise you’re stuck with prop drilling from the component downwards.

[dylanhu7]

Makes sense, thanks. If you extract the component, would it make sense to type the props with something like

function MyComponent({ loaderData, context }: typeof Route.ComponentProps)

(looking very much like RRv7 haha)

Not pushing for this, just curious about the considerations in choosing to implement or not implement this.

[thomastvedt]

  const accumulatedContext = useMatches({
    structuralSharing: true,
    select: (matches) => matches[matches.length - 1].context
  });

So this is the way to get the router context in a component? I was hoping there would be a useRouterContext() hook that I could easily plugin in my components :)

My scenario is something like this:

• there is a tree structure root->retailer->machine
• url /machine/123 must resolve the machine's retailerId (beforeLoad, async query, setting retailerId on context)
• I don't use the built in data loader functions, but simply load data in the component.
• in my breadcrumbs I need both the machineId (param) and the resolved retailerId (context)

Questions:

• Is the router context meant mostly for the data loader functions?
• Would you recommend to roll my own context separate from the router context for my scenario?