I'm using react-i18next in my reactjs app.

Problem is when I change the language the app reloads and always starts from main route.

is there a way to redirect on same page or change language without reload page?

thanks

UPDATE

I18n.js

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import {de} from "../../locales/de";
import {en} from "../../locales/en";

i18n
    .use(LanguageDetector)
    .init({
        resources: {
            en: en,
            de: de
        },
        fallbackLng: 'de',

        // have a mon namespace used around the full app
        ns: ['translations'],
        defaultNS: 'translations',

        keySeparator: '.',

        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ','
        },

        react: {
            wait: true
        }
    });

export default i18n;

Change Language:

    const { t, i18n } = this.props;
    const changeLanguage = (lng) => {
        i18n.changeLanguage(lng);
    };

I'm using react-i18next in my reactjs app.

Problem is when I change the language the app reloads and always starts from main route.

is there a way to redirect on same page or change language without reload page?

thanks

UPDATE

I18n.js

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import {de} from "../../locales/de";
import {en} from "../../locales/en";

i18n
    .use(LanguageDetector)
    .init({
        resources: {
            en: en,
            de: de
        },
        fallbackLng: 'de',

        // have a mon namespace used around the full app
        ns: ['translations'],
        defaultNS: 'translations',

        keySeparator: '.',

        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ','
        },

        react: {
            wait: true
        }
    });

export default i18n;

Change Language:

    const { t, i18n } = this.props;
    const changeLanguage = (lng) => {
        i18n.changeLanguage(lng);
    };

• javascript
• reactjs
• i18next
• react-i18next

Share Improve this question Follow edited Jul 28, 2017 at 18:08 Felix asked Jul 28, 2017 at 11:19 FelixFelix 5,6261414 gold badges8080 silver badges173173 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

how do you change language? using querystring?

if you call i18next.changeLanguage(lng); there won't be a change, just rerender in new language...

as a sample see: https://github./i18next/react-i18next/blob/master/example/webpack2/app/ponents/View.js#L50

Had the same issue. I was using i18n-js and react navigation to manifest stacks and tabs. This thread was the only one I could find on the internet. However, it did not lead me to the solution. Anyway, I still managed to sort it out and would share my solution.

Check if you also translate the names of your stacks and tabs, most likely it should be the tab one. The translated name will make react navigation lost as it no longer recognize the pages being recorded in the route, as the tab names are pletely new in another language. That is why it jumps to the page wherever it finds it is the top of all navigators. The walkaround is to use label for the texts you want to translate and display while keeping a static name for your pages.