How to translate <title> with i18next?

[edwin-speer]

I'm using i18next to translate texts. But I'm unable to translate the page title (title meta tag/document.title).

When I do this (when following the documentation):

export const Route = createFileRoute("/about")({
  component: About,
  head: () => ({
    meta: [
      {
        title: i18n.t("title.about", "About"),
      },
    ],
  }),
});

The text is not translated, probably because the translation file is not yet loaded when head() is called.

The <RouterProvider/> is wrapped inside <I18nextProvider/>.

It seems the problem is that head() is only called once and not again when the translation file is loaded.

I now "solved" it in a very hacky (and possibly brittle) way, like this

    meta: [
      {
        title: i18n.t("title.about", "About"),
        translationKey: "title.about"
      },
    ],

Later I read out the translationKey and set document.title, but it's very non standard and not a desired solution.

I couldn't find any documentation on how to solve this, although this problem seems to be not uncommon.

Is this a bug, feature request or am I missing something?

I'm using
@tanstack/router-plugin 1.111.3

[edwin-speer]

For anyone with the same problem: I fixed it with a hook:

usePageTitle.ts

import { useRouter } from "@tanstack/react-router";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

export const usePageTitle = () => {
	const { t } = useTranslation();
	const router = useRouter();

	useEffect(() => {
		void router?.invalidate();
	}, [router, t]);
};

And then include it in your topmost component.

usePageTitle();