How to update translated page titles when changing language with i18next?

[tomek-ch]

When using head like this, the title is translated correctly. However, if you change the language, the title doesn't change unless you navigate to a different route and go back to this one, or refresh the page.

export const Route = createFileRoute('/test')({
  head: () => ({ meta: [{ title: i18n.t('test') }] })
})

Seems like head tags are set only on initial route navigation and I haven't found a way to update them afterwards. Is it possible to insert dynamic values there or reset the values on language change, or should I use a different solution for head management?

[depsimon]

You should pass the i18n instance to the router context, then it's available in the head method via the match.context

export const Route = createFileRoute('/test')({
  head: ({ match }) => ({ meta: [{ title: match.context.i18n.t('test') }] })
})

[tomek-ch]

This doesn't make the translated string dynamic though, the title still doesn't update when changing the language

[depsimon]

It should if you invalidate the router after switching the context locale.