javascript - Update translation without page refresh (i18next with react) - Stack Overflow

My _nav.js file:

import i18n from '../../services/Translator';

export default {
  items: [
    {
      name: i18n.t('DASHBOARD'),
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: i18n.t('SCHEDULE'),
      url: '/schedule',
      icon: 'icon-calendar',
    },
    {
      name: i18n.t('USERS'),
      url: '/users',
      icon: 'icon-user',
    },
    {
      name: i18n.t('LEASING_COMPANY'),
      url: '/pany',
      icon: 'icon-organization',
    },
  ],
};

My ponent:

import { translate } from 'react-i18next';
import nav from '../Sidebar/_nav';
/...
render() {
  const test = nav.items.map((item) => {
    return <li key={item.url}>{item.name}</li>;
  });

  return (
    <ul>{test}</ul>
  );
}

The problem is I don't get my text translated when I change language. My browser need to be refreshed to apply translation. Anyone know how to get translation done without page refresh?

Edit: This is my Translator service:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from '../../lang/en';
import vn from '../../lang/vn';
import env from '../../config/env';

i18n
  .use(LanguageDetector)
  .init({
    // we init with resources
    resources: {
      en,
      vn,
    },
    fallbackLng: env.defaultLanguage,

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

    keySeparator: false, // we use content as keys

    react: {
      wait: true,
    },
  });

export default i18n;

I also put my change language button on the Header ponent in my page.

My _nav.js file:

import i18n from '../../services/Translator';

export default {
  items: [
    {
      name: i18n.t('DASHBOARD'),
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: i18n.t('SCHEDULE'),
      url: '/schedule',
      icon: 'icon-calendar',
    },
    {
      name: i18n.t('USERS'),
      url: '/users',
      icon: 'icon-user',
    },
    {
      name: i18n.t('LEASING_COMPANY'),
      url: '/pany',
      icon: 'icon-organization',
    },
  ],
};

My ponent:

import { translate } from 'react-i18next';
import nav from '../Sidebar/_nav';
/...
render() {
  const test = nav.items.map((item) => {
    return <li key={item.url}>{item.name}</li>;
  });

  return (
    <ul>{test}</ul>
  );
}

The problem is I don't get my text translated when I change language. My browser need to be refreshed to apply translation. Anyone know how to get translation done without page refresh?

Edit: This is my Translator service:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from '../../lang/en';
import vn from '../../lang/vn';
import env from '../../config/env';

i18n
  .use(LanguageDetector)
  .init({
    // we init with resources
    resources: {
      en,
      vn,
    },
    fallbackLng: env.defaultLanguage,

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

    keySeparator: false, // we use content as keys

    react: {
      wait: true,
    },
  });

export default i18n;

I also put my change language button on the Header ponent in my page.

• javascript
• reactjs
• i18next
• react-i18next

Share Improve this question Follow edited Dec 22, 2017 at 7:06 TungPham asked Dec 22, 2017 at 6:55 TungPhamTungPham 10333 silver badges1414 bronze badges 2

• Could you share where you change the language, which ponent and how – arikanmstf Commented Dec 22, 2017 at 6:58
• Sorry about that! I've updated my question – TungPham Commented Dec 22, 2017 at 7:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Can't work like this...you assign translations to objects in the array inside _nav.js

Those will be strings no way any code will ever update those values you will need to regenerate those on language change or:

import i18n from '../../services/Translator';

export default {
  items: [
    {
      name: 'DASHBOARD',
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: 'SCHEDULE',
      url: '/schedule',
      icon: 'icon-calendar',
    },
    {
      name: 'USERS',
      url: '/users',
      icon: 'icon-user',
    },
    {
      name: 'LEASING_COMPANY',
      url: '/pany',
      icon: 'icon-organization',
    },
  ],
};

and

import { translate } from 'react-i18next';
import nav from '../Sidebar/_nav';
/...
render() {
  const test = nav.items.map((item) => {
    return <li key={item.url}>{t(item.name)}</li>;
  });

  return (
    <ul>{test}</ul>
  );
}