页面的多种语言（react-i18next）

Question

I am using react-i18next lib for languages.

Problem : I need to use user language for website but for article i need to use language of this article.

My solution : I want to wrap current article in another I18nextProvider and pass article lang to it. I hope it will be fine:) If it's works i will write solution here.

My question : Maybe exists another solution of this problem?

Answer 1

It's works:

export const LanguageContainer: React.FC<Props> = (props) => {
  const i18n = React.useMemo(() => {
    const xhr = new XHR(undefined, {
      loadPath: (languages, namespace) => {
        const version = app.Version ? `?v=${app.Version}` : '';
        const dir = app.Production ? Configuration.Localization.RootDir : Configuration.Localization.DefaultRootDir;
        return url.resolve(dir, `./${props.lang}/${namespace}.json${version}`);
      },
    });
    const I18n = i18next.createInstance().use(xhr);

    I18n.init({
      ns: ['general'],
      defaultNS: 'general',
      fallbackLng: Configuration.Localization.DefaultLanguage,
      whitelist: Configuration.Localization.Languages.map((x) => x.key),
    });

    return I18n;
  }, [props.lang]);

  return (
    <I18nextProvider i18n={i18n}>
      {props.children}
    </I18nextProvider>
  );
};

And how to use:

<LanguageContainer lang="en">
   // here components which need to use lang en     
</LanguageContainer>

Answer 2

<LanguageContainer lang=({language})>
  // here components which need to use lang en     
</LanguageContainer>

This is the best away, because this value is object who you send from customers components. And not bad idea in this case use context

Answer 3

A simpler solution to get additional languages is to call i18n.getFixedT('language-code') .