-
|
We've added localization to our Remix app following this example: https://sergiodxa.com/tutorials/add-i18n-to-a-remix-vite-app This works, but we would like the language detector to also pick up on the locale as a prefix in the url: http://localhost:3000 <- default language If I'm checking the Typescript type |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 8 replies
-
|
Create an optional route segment (https://remix.run/docs/en/main/file-conventions/routes#optional-segments) and read yourself from the params object in the root loader. |
Beta Was this translation helpful? Give feedback.
-
|
Ah yes of course that was an option as well. Tnx! |
Beta Was this translation helpful? Give feedback.
-
|
I can get it work like this, the only downside is that the order in which we want to determine the locale is:
So when doing this: |
Beta Was this translation helpful? Give feedback.
-
|
@sergiodxa When intercepting params from optional segments in the root.tsx loader, the default language flashes before the correct language (obtained from the route param) is displayed. How can this be avoided? Sample code below: // root.tsx
import type { LinksFunction, LoaderFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from '@remix-run/react';
import { useTranslation } from 'react-i18next';
import { useChangeLanguage } from 'remix-i18next/react';
import i18next from '~/i18next.server';
export const loader = async ({ params, request }: LoaderFunctionArgs) => {
// let locale = await i18next.getLocale(request);
const locale = params.lang
return json({
locale,
});
};
// https://github.com/sergiodxa/remix-i18next?tab=readme-ov-file#usage
export let handle = {
i18n: 'translation',
};
export default function App() {
const { locale } = useLoaderData<typeof loader>();
let { i18n } = useTranslation();
console.log({ locale });
useChangeLanguage(locale);
return (
<html lang={locale} dir={i18n.dir()}>
<head>
<Meta />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="https://fav.farm/🤘" />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
|
Beta Was this translation helpful? Give feedback.
-
|
Are you also getting the locale from the route params or route data in entry.server? Or are you using getLocale? |
Beta Was this translation helpful? Give feedback.
-
|
@sergiodxa I just figured out that I can get the params in entry.server (thanks for the article: https://sergiodxa.com/tutorials/get-remix-route-params-in-entry-server), which seems to have solved the flashing. Perhaps adding a section to the readme on detecting the language based on the path could be helpful? I could put up a PR if you'd be open to that. |
Beta Was this translation helpful? Give feedback.
-
|
@sergiodxa Server rendering is working well now, but a client side navigation using the remix NavLink component that changes language by path identifier isn't updating. Using the root.tsx example above, it appears that the loader isn't getting called, which is causing the lang in |
Beta Was this translation helpful? Give feedback.
-
|
I never keep the locale in the pathname, instead I use cookies, and I update them using an action so the root loader run again to be revalidated, but there are some ways to solve it without using an action. If you enable Single Fetch in your Remix app every navigation will trigger all the loaders including the root loader, so that should help resolve your issue of the root loader not updating. Another way is that instead of using the root loader to return the locale, you return it from the route with the path, and then use useRouteLoaderData to grab the value in your root component. let loaderData = useRouteLoaderData<typeof loader>("routes/($lang)");
let locale = loaderData?.locale ?? "en" // replace "en" with your default languageThe loader of |
Beta Was this translation helpful? Give feedback.
-
|
I did this on my app because the loader's class CustomDetector extends LanguageDetector {
private urlSegmentPosition = 1;
constructor(private options: LanguageDetectorOption) {
super(options);
}
private fromUrlSegment(request: Request) {
const url = new URL(request.url);
const segment = url.pathname.split('/');
return segment;
}
public async detect(request: Request): Promise<string> {
const url = new URL(request.url);
const segments = url.pathname.split('/');
const maybeLocale = segments[this.urlSegmentPosition];
if (this.options.supportedLanguages.includes(maybeLocale)) {
return maybeLocale;
}
return this.options.fallbackLanguage;
}
}
// @ts-ignore
class CustomRemixI18Next extends RemixI18Next {
private detector: CustomDetector;
// eslint-disable-next-line no-useless-constructor
constructor(private options: RemixI18NextOption) {
super(options);
this.detector = new CustomDetector(this.options.detection);
}
}The If useful I can do a proper PR to add this method @sergiodxa . |
Beta Was this translation helpful? Give feedback.
-
|
The getFixedT accepts the locale instead request, you could detect it from the pathname and pass it directly to that function. |
Beta Was this translation helpful? Give feedback.
-
|
Duh you're right 🤦🏻♂️ I forgot about that! On the other side I would argue having unsynced state is a silent bug waiting to happen. It just takes someone using intellisense for it to happen. |
Beta Was this translation helpful? Give feedback.
Create an optional route segment (https://remix.run/docs/en/main/file-conventions/routes#optional-segments) and read yourself from the params object in the root loader.