sergiodxa/remix-i18next

htmlTag detection not working

mikkpokk opened this issue · 3 comments

mikkpokk commented

Describe the bug

Application always resets language to fallbackLng unless you don't pass ?lng={{lng}} parameter to every route.

Your Example Website or App

https://github.com/locize/locize-remix-i18next-example/tree/local

Steps to Reproduce the Bug or Issue

  1. Download local branch
  2. Install dependencies npm install
  3. Run dev server npm run dev
  4. Change language
  5. Navigate to second link

Expected behavior

Expected behaviour would be to see german translations after navigating to the second page.

Platform

  • OS: macOS
  • Browser: Chrome
  • Version: 100.0.4896.127
sergiodxa commented

The behavior is correct, when the lng parameter is removed from the URL (when you navigate to the second route) and that triggers the root loader to run again.

Because the search param is not anymore on the URL then getLocale will not use Deutsch as the language and instead it will go back to the language detected by the Accept-Language header or the fallback language.

If you want to keep the user selected language around, the easiest way is to store it on a cookie created with Remix's createCookie function and pass that cookie object to the RemixI18Next detection option.

I sent a PR locize/locize-remix-i18next-example#1 to add that

mikkpokk commented

@sergiodxa Thank you. Yes, I'm aware about cookie and session listener ability. However, documentation made me to scratch my head. I undestand that part as server should listen client-side lang value from the html tag.

image

sergiodxa commented

I may have to rephrase that then, the idea is that the client detects the language from the html and the server is the correct one.