T
TanStack•6mo ago
deep-jade

How to access parent routes loaderData in `head: () => {}`?

I want to localize my meta titles. As of now I load all my translations like this in the /$lang/route.tsx file: 
  loader: async ({ params }) => {
    return {
      dict: await getTranslations(params.lang as Language),
    };
  },
  loader: async ({ params }) => {
    return {
      dict: await getTranslations(params.lang as Language),
    };
  },
How do I access this in child routes? Inside the component I have a context provider that allows me to call useTranslations() but this does not work in the head function of course. Any tips on how to set this up? Maybe an inherited context? Any ideas? :⁠D
6 Replies
adverse-sapphire
adverse-sapphire•6mo ago
in the head function you get all matches passed in those also give you access to the loader data
deep-jade
deep-jadeOP•6mo ago
That's exactly what I've tried. On the client that works fine: But on the server during SSR I don't the loaderData: Basically everything except loaderData of RouteMatch (https://tanstack.com/router/latest/docs/framework/react/api/router/RouteMatchType#routematch-type) is passed correctly. But not the data :/
RouteMatch type | TanStack Router React Docs
The RouteMatch type represents a route match in TanStack Router. tsx interface RouteMatch { id: string routeId: string pathname: string params: Route['allParams'] status: 'pending' | 'success' | 'erro...
No description
No description
adverse-sapphire
adverse-sapphire•6mo ago
this probably means that the parent loader has not finished yet they are run in parallel
deep-jade
deep-jadeOP•6mo ago
Hmm. Is there any other way how to share the translations keys other than adding the loading to every route?
adverse-sapphire
adverse-sapphire•6mo ago
can you do this in beforeLoad and return? then you would get it in the route context
deep-jade
deep-jadeOP•6mo ago
Works like a charm! 🥳 Thanks a lot!! Looks a little bit weird at first but the types are perfect: 
head: ({
    match: {
      context: { dict },
    },
  }) => ({
    meta: seo({
      title: dict["app:page.myRecipes"],
    }),
  }),
head: ({
    match: {
      context: { dict },
    },
  }) => ({
    meta: seo({
      title: dict["app:page.myRecipes"],
    }),
  }),

Did you find this page helpful?