在 React 路由器加载器中加载 react-i18next 翻译而不是 hook

Question

我正在使用新版本的 react-router-dom，我希望每个页面仅在加载页面的所有数据时显示。

我正在使用加载程序来获取数据并显示包含已获取数据的页面。但是，我将 react-i18next 与后端插件一起使用，并且我正在使用 useTranslation 挂钩。

useTranslation 挂钩不会立即加载数据，我必须使用带有后备内容的 Suspense 组件。我想在加载程序中加载翻译，避免在页面中显示加载微调器。

有什么办法可以实现吗？

以下是我的i18n.js文件：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    detection: {
      lookupCookie: "lng",
      caches: ["cookie"],
      cookieOptions: import.meta.env.PROD
        ? { sameSite: "none", secure: true }
        : null,
    },
  });

export default i18n;

以下是我的index.jsx文件：

// ...

import "./i18n";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Suspense fallback={<></>}>
      <App />
    </Suspense>
  </React.StrictMode>
);