使用react-i18next作为React Admin的翻译提供程序

Question

我正在尝试使用react-i18next作为react-admin的翻译提供程序。React-admin提供了有关如何设置custom translation provider的文档。

这很容易理解，我为i18next创建了一个：

export const i18nProvider = {
    translate: (key, { _, smart_count, ...rest } = {}) => {
        return i18n.t(key, {
            defaultValue: _,
            count: smart_count,
            ...rest,
        });
    },
    changeLocale: (locale) => i18n.changeLanguage(locale),
    getLocale: () => i18n.language,
};

我遇到的问题是react-i18next使用suspense来加载翻译，并且当直接调用i18n.t函数而不是通过hook调用时，这种行为似乎不起作用

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  return <h1>{t('Welcome to React')}</h1>
}

// i18n translations might still be loaded by the http backend
// use react's Suspense
export default function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
    </Suspense>
  );
}

最终发生的情况是，i18n.t函数在加载翻译之前被调用，并且最终不显示翻译。

有没有更好的方法来集成react-i18next和react admin？

Answer 1

实例化i18n并在挂载应用程序时简单地导入它

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import frTranslations from '~/locales/fr.json';

i18n
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'fr',
    resources: {
      fr: { translation: frTranslations },
    },
  });

export default i18n;

import App from './App';

import './i18n';

ReactDOM.render(<App />, document.getElementById('root'));

然后你就可以像这样使用它了。

import { useTranslation } from 'react-i18next';

function SearchFilter(props) {
  const { t } = useTranslation();
  ...
}