在已部署的React App中，github页面未从服务器加载文件

Question

我已经将react项目部署到github，并且在使用github页面查看它时。我正在为我的web应用程序使用i18next进行不同的翻译。当我通过本地主机运行我的应用程序时，locales文件夹被访问并正确地转换我的应用程序的内容。然而，当使用github页面部署时，我得到了错误：

警告：

i18next::backendConnector: loading namespace translation for language en failed failed loading /locales/en/translation.json

错误：

request.js:60 GET https://user.github.io/locales/en/translation.json 404

因此，我无法访问我的locales文件夹中的翻译。

我的文件夹结构(我有文件夹里面有更多的语言，而不是英语在同一级别)：public > locales > en > translation.json

文档中的i18next.js位于以下位置：

src > i18n.js 

使用代码：

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

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

const Languages = ['en' , 'gr']; //the languages I want 


i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist:Languages,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }


  });


export default i18n;

我将非常感谢你的帮助

Answer 1

为了在gh页面上部署，您需要调整托管json check this的loadPath。

希望这能起作用！