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

/$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()

useTranslations()

but this does not work in the

head

head

function of course.

Any tips on how to set this up? Maybe an inherited context? Any ideas? :⁠D

TanStack•12mo ago•

9 replies

moderate-tomato

I want to localize my meta titles. As of now I load all my translations like this in the

/$lang/route.tsx

/$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()

useTranslations()

but this does not work in the

head

head

function of course.

Any tips on how to set this up? Maybe an inherited context? Any ideas? :⁠D