aktualisieren Übersetzung ohne Aktualisierung der Seite (i18next mit reagieren)

Question

Meine _nav.js Datei:

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: '/company', 
     icon: 'icon-organization', 
    }, 
    ], 
}; 

Meine Komponente:

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> 
); 
} 

Das Problem ist, ich weiß nicht mein Text übersetzt werden, wenn ich die Sprache ändern. Mein Browser muss aktualisiert werden, um die Übersetzung anzuwenden. Wer weiß, wie man eine Übersetzung ohne Seitenaktualisierung erhält?

Edit: Das ist mein Übersetzer 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 common namespace used around the full app 
    ns: ['translations'], 
    defaultNS: 'translations', 

    keySeparator: false, // we use content as keys 

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

export default i18n; 

Ich habe auch meine Sprache ändern auf der Kopf- Komponente in meiner Seite.

Answer 1

Kann nicht arbeiten ... Sie Übersetzungen auf Objekte zuweisen in das Innere Array _nav.js

Diese werden Strings keine Möglichkeit, jeder Code wird jemals diese Werte aktualisieren, müssen Sie die auf Sprache regenerieren ändern oder:

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: '/company', 
     icon: 'icon-organization', 
    }, 
    ], 
}; 

und

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> 
); 
}