错误：I18nextWithTranslation在渲染时挂起，但未指定后备UI

Question

我正在尝试使用react-i18next使I18N工作。我正在尽可能接近此处提供的步骤。我已经尝试了几个小时，但仍在使用Google搜索，但还没有发现我在做什么错。任何帮助表示赞赏。

我收到此错误堆栈跟踪：

    Exception has occurred: Error
Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in I18nextWithTranslation (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in CookiesProvider
    at throwException (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:45969:13)
    at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47147:11)
    at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
    at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
    at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
    at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
    at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
    at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
    at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10)
    at updateContainer (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48315:10)

我在最高层有一个备用的悬念：

import React, { Suspense } from 'react';
import ReactDOM from "react-dom";
import { CookiesProvider } from 'react-cookie';
import App from "./App.js";
import { BrowserRouter } from "react-router-dom";
// import i18n (needs to be bundled ;)) 
import './i18n';

ReactDOM.render(
  <CookiesProvider>
    <BrowserRouter basename="/cgadmin-react-primeng/">
      <Suspense fallback={<Loader />}>
        <App />
      </Suspense>
    </BrowserRouter>
  </CookiesProvider>, 
  document.getElementById("root")
);

const Loader = () => (
  <div>loading...</div>
);

我没有使用钩子，而是建议将HOC推荐用于App类中的类，如下所示：

export default withTranslation()(App);

Answer 1

默认情况下，useSuspense 设置为 true，因此 React 需要回退 UI。将 useSuspense 设置为 false 将解决您的问题，因为 React 将不再需要回退 UI。

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

Answer 2

我遇到了同样的问题，并且已经解决了将渲染包装在 上的问题<Suspense>，您可以在此处找到更多信息https://reactjs.org/docs/react-api.html#reactsuspense

在 i18next 的文档中也说了同样的话https://react.i18next.com/latest/using-with-hooks#translate-your-content

-

还

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

前面的代码可以工作，但留下了很多警告，最好的方法是使用<Suspense>

Answer 3

您能提供一个更具体的错误情况示例吗？我已尽力在沙箱中进行模拟（https://codesandbox.io/s/10j2xw6j3），但我无法重现这种情况。

ps 这应该添加在评论中，但是 stackoverflow 阻止新用户这样做。所以我在这里发布并稍后编辑