changeLanguage does not work form within react components

[lauhon]

Hi, I am not sure if this actually should work, but I tried to create a client side langauge switcher:

import {changeLanguage} from 'i18next';

const LanguageSwitch = () => {
  return (
    <div>
      <button onClick={() => changeLanguage('de')}>DE</button>
      <button onClick={() => changeLanguage('en')}>EN</button>
    </div>
  );
};

export default LanguageSwitch;

the command astro-i18next generate works as intended, so I think I set up the module correctly. But when I click the buttons, the language is not actually changed.

Not sure if this is a bug, or if I should actually do this differently. If there is a different intended way to do this, it would be great to have it in the documentation :)

[yassinedoghri]

Thank you for the issue! The documentation should be updated.

I'll leave this here for reference on how to reconcile server and client side translations:

1. Language switch must be done server side and the language must be written into the generated pages, in the html tag using the lang attribute.
2. Then on client side, the language can be detected using the i18next-browser-languagedetector plugin.