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

In case of react-i18next make sure useSuspense is enabled or handle the ready state in HOCs or hooks yourself.

您需要用 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.

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

React i18next - Don't show translations until request finished

i18next

reactjs

react-i18next