React i18next-在请求完成之前不显示翻译

Question

我正在从后端获取语言信息。我想提出获取语言信息的请求，然后向i18next发出信号，它可以显示翻译。当前，它会显示默认语言翻译一秒钟，直到请求完成并且我呼叫i18next.changeLanguage()。

我将如何实现？

这是我的配置：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import XHR from "i18next-xhr-backend";

 i18n
  .use(initReactI18next)
  .use(XHR)
  .init({
    fallbackLng: "en-GB",
    keySeparator: false,
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath: "/locales/{{lng}}.json"
    }
  });

我正在使用useTranslation钩子来获取t函数：

 const { t } = useTranslation();

Answer 1

如果有react-i18next，请确保启用useSuspense或在HOC中处理就绪状态，或者自己挂机。

您需要用Suspense组件包装您的根组件，以确定在加载翻译时应呈现的内容。

import React, { Suspense } from 'react';
import RealApp from './App';
import Loading from './Loading';
import { I18nextProvider } from 'react-i18next';
import App from './App';

function Root(props) {
  return (
    <Suspense fallback={<Loading />}>
      <I18nextProvider i18n={i18n}>
        <Root />
      </I18nextProvider>
    </Suspense>
  );
}

更多info。