时间戳

首页 > 解决方案 > 在我的 App 组件中导入 i18n 后，组件消失了

reactjs - 在我的 App 组件中导入 i18n 后，组件消失了

问题描述

如纪录片中所述创建 i18n.js 文件，并在文件中插入以下代码

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

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

const languages = ["en",  "es", "ar"]



const options = {

    order: [ 'localStorage', 'cookie', 'querystring', , 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],


    lookupQuerystring: 'lng',
    lookupCookie: 'i18next',
    lookupLocalStorage: 'i18nextLng',
    lookupSessionStorage: 'i18nextLng',
    lookupFromPathIndex: 0,
    lookupFromSubdomainIndex: 0,

    caches: ['localStorage', 'cookie'],
    excludeCacheFor: ['cimode'],


    cookieMinutes: 10,
    cookieDomain: 'myDomain',

    htmlTag: document.documentElement,


    cookieOptions: { path: '/', sameSite: 'strict' }
}


i18n

    .use(Backend)

    .use(LanguageDetector)

    .use(initReactI18next)

    .init({
        fallbackLng: 'en',
         lng: 'en',
        debug: true,
        whitelist: languages,
        detection: options,

        interpolation: {
            escapeValue: false,
        }
    });


export default i18n;

然后在 App 组件中导入上述文件，刷新已经翻译的页面后，组件正在消失，但是当我评论 i18n.js 在我的 App 组件中导入的文件时，一切正常

标签： reactjs

解决方案

请检查浏览器控制台，您可能会在那里找到答案。

快速查看您的代码，您的对象似乎options在数组中存在类型错误order，即额外的逗号。

..., 'querystring', , 'sessionStorage', ...

我建议使用 eslint，以便您可以在 IDE 中找到并解决此问题。

推荐阅读