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();

[codinginflow]

Thank you. Would you call this once in the __root.tsx? Or on each page individually?

[edwin-speer]

Only once

[codinginflow]

This seems to cause beforeLoad to run twice on page load. Do you think @dbgordon09's solution might be better?

[dbgordon09]

@edwin-speer You sir are a gentleman and a scholar 🎩 This helped me resolve the issue with translating meta on my side.

Turns out the configuration of

{
    defaultNS: false,
    ns: [],
}

to remove namespaces was causing i18n.t() to not work correctly. Removing that add using the following hook in __root.tsx works!

/**
 * A hook that manages language change effects in the application.
 * It tracks the current i18n locale and updates the document's text direction
 * when the language changes. The hook also forces a component rerender by
 * updating state and triggers a router invalidation to ensure the application
 * updates accordingly.
 *
 * The hook uses a state setter to trigger rerenders and sets up an i18n
 * languageChanged event listener to handle language changes. It cleans up
 * the event listener when the component unmounts.
 *
 */
export function useLanguageChange() {
  const [, setLocale] = useState(i18n.language);
  const router = useRouter();

  useEffect(() => {
    const handler = (locale: string) => {
      setLocale(locale);
      document.documentElement.dir = i18n.dir(locale);
      void router?.invalidate();
    };
    i18n.on("languageChanged", handler);
    return () => i18n.off("languageChanged", handler);
  }, []);
}

[codinginflow]

This solution is better because it doesn't trigger beforeLoad twice on page load