React-i18next suspense

Question

我正在像示例一样使用React-i18next

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

function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
   </Suspense>
   );
}

但是Suspense正在破坏我的另一个组件，即react-masonry-layout。不使用Suspense可能吗？

谢谢。

- Cheung Brian

---

你能具体说明一下，它是如何破坏你现有的代码的吗？ - Shubham Khatri

其实我不太确定是不是 Suspense 的问题。但我认为是。所以我想知道如何在没有 Suspense 的情况下使用 react-i18next。似乎 i18next 必须要用到 Suspense。 - Cheung Brian

悬念从来不是必须的，你可以选择是否使用它。同时，我没有看到你在哪里使用react-i18nnext。 - Shubham Khatri

Answer 1

react-i18nnext默认使用Suspense。如果您不想使用它，您需要在配置中指定。如果您有一个i18n配置文件，您可以在init对象的react部分将useSuspense标志设置为false。

//Example config
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
   fallbackLng: "en",
   debug: true,
   resources: {

   },
   interpolation: {
     escapeValue: false,
   },
  react: {
     wait: true,
     useSuspense: false,
  },
})

或者你可以在你的组件中设置标记。

<MyComponent useSuspense={false} />

请注意，选择不使用Suspense有其影响。您必须编写检查来处理“未准备好”状态，例如：在状态未准备好时呈现加载组件，并在状态准备好时呈现您的组件。如果不这样做，将会在翻译加载之前渲染您的翻译。

- rivnatmalsa

---

非常感谢。让我试试。我有一个砖石组件，需要在加载时计算屏幕宽度和高度。我怀疑这个砖石组件受到了暂停的干扰。所以我想试一下。 - Cheung Brian

谢谢回复，我也遇到了同样的问题，悬停打断了我的 @material-ui 动画。 - Fernando Gomes

悬疑功能是一种实验性的功能，我们是否应该在生产系统中使用它？我有点惊讶这是来自React-i18next的官方建议。 - Woody

Answer 2

日期：2021年2月9日

版本

    "next": "^11.0.1",
    "next-i18next": "^8.5.1",

在NextJs中，SSR暂不支持Suspense。因此，如果您需要删除它，则需要在next-i18next.config.js上禁用它。

问题

Error: ReactDOMServer does not yet support Suspense.

修复 next-i18next.config.js

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  localePath: path.resolve('./assets/locales'),
  react: {
    useSuspense: false,
  },
};

- Mohamed Jakkariya