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

【问题标题】：React i18next - Don't show translations until request finishedReact i18next - 在请求完成之前不显示翻译
【发布时间】：2020-03-31 23:04:30
【问题描述】：

我正在从后端获取语言信息。我想请求获取语言信息，然后向 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();

【问题讨论】：

标签： reactjs i18next react-i18next

【解决方案1】：

如果是 react-i18next，请确保 useSuspense 已启用或自行处理 HOC 或 hooks 中的就绪状态。

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

【讨论】：