React-i18next: Translation Files Not loading on gh-pages publish

[LALauw]

I just published my first reactjs app to github, with a translation option. I was using i18next.
Everything worked fine locally. Translation were done. Now I published my app to gh-pages and suddenly my translations broke. I tried using the xhr backend but no succes. I hope anyone can help me as i'm still new to this.
This is how my I18n looks:

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

import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
// not like to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init
const Languages = ["en", "nl"];

i18n
// load translation using xhr -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
// learn more: https://github.com/i18next/i18next-xhr-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({
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},
fallbackLng: "en",
debug: true,
whitelist: Languages,

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

});

export default i18n;
```

I have all my translation files in the following path:
EN
public/locales/en/translation.json
NL
public/locales/nl/translation.json

[adrai]

Probably the loadPath is different on gh-pages.
Locally the files where on root /... but on gh-pages you first have your reponame /reponame/...

[LALauw]

Yes, I had to import the path first and then link them in the init function.
```
import translationEN from "./locales/en/translation.json";
import translationNL from "./locales/nl/translation.json";
const resources = {
en: {
translation: translationEN,
},
nl: {
translation: translationNL,
},
};

.init({
fallbackLng: "en",
debug: true,
lng: "en",
resources,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
```
Now its working fine :)