-
|
Hi @sergiodxa, I tried your library, thinking about including i18n in my project before it is too late. But I'm already facing a weird issue: Warning: Text content did not match. Server: "Bonjour" Client: "Hello"I understand there is a clash during the hydration, with a missmatch between the server and the client. But I don't get why.. It seems I followed everything from scratch. A sandbox repo is available here: https://github.com/binajmen/remix-i18n-sandbox/tree/main/app/routes/ FYI, I'm in Belgium, so perhaps there is a clash between A secondary question would be: how do you handle locale selection when using I noticed this code snippet in another discussion, but it is unclear how I could make is work with a path instead. Thank you for your help 🙏 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
This happens because you didn't loaded the same translations on the server and the client, ensure since you're using a You either use i18n.getLocale or use the params on the URL. |
Beta Was this translation helpful? Give feedback.
-
|
So you're suggesting the following? export let loader: LoaderFunction = async ({ request, params }) => {
const { lang } = params;
invariant(typeof lang === "string");
// let locale = await i18next.getLocale(request);
return json<LoaderData>({ locale: lang });
};
export default function App() {
let { locale } = useLoaderData<LoaderData>();
let { i18n } = useTranslation();
useChangeLanguage(locale);
return (
<html lang={locale} dir={i18n.dir()}>
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
Oh in fact I must modify // let lng = await i18next.getLocale(request);
let lng = remixContext.matches[0].params.lang!;It seems a bit hacky to retrieve the lang that way, but I suppose this is the only way, correct? Would appreciate to get your feedback on that strategy. Thank you for your help, really appreciated 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, something like that should work! |
Beta Was this translation helpful? Give feedback.
-
|
Yes I ended up with: const lng = remixContext.matches[0].params.lang ?? i18n.fallbackLng; |
Beta Was this translation helpful? Give feedback.
This happens because you didn't loaded the same translations on the server and the client, ensure since you're using a
$langroute to detect the user language, you should not detect it usingi18n.getLocalebecause that will not respect the URL, it will read it from your search params, session, cookie or headers.You either use i18n.getLocale or use the params on the URL.