react-i18next:我如何用一种不是我当前选择的语言获取文本

Question

我有以下问题：我使用了与i18next的react，还使用i18next后端来加载我的翻译文件。我有一个语言切换器，我想用它不仅改变语言，还改变网址。但在更改语言之前，我需要访问新语言的命名空间"routes"。我该怎么做？

这是我的i18n配置：

i18n
.use(initReactI18next)
.use(detector)
.use(HttpApi)
.init({
defaultNS: 'routes',
fallbackLng: ['de'],
supportedLngs: ['de', 'en'],
detection: {
order: ['path'],
lookupFromPathIndex: 0,
},
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
keySeparator: false,
interpolation: {
format,
},
});
export default i18n;

我的Langugage Selector使用以下功能：

changeLanguage = (ln) => {
const routes = i18n.getResourceBundle(i18n.language, 'routes');
const currentPathname = window.location.pathname.replace(//+$/, '');
let currentRouteKey = Object.keys(routes).find((key) => routes[key] === currentPathname);
if (ln === 'en' && currentPathname === '') {
currentRouteKey = '/en';
}
window.location.replace(this.props.t('routes:' + currentRouteKey, { lng: ln }));
};

德语是我的备用语言，当我从英语版本的应用程序开始时，语言更改是有效的，但当我从德语版本开始时，它不起作用。我想那是因为没有加载英文文件。如何触发此文件？

Answer 1

您可以触发i18next.changeLangauge来更改语言，而不是整个页面重新加载(使用location.replace(，在后台，lib将加载丢失的语言，然后您可以使用History Api来更改URL。

// pseudo code
changeLanguage = (ln) => {
i18n.changeLanguage(lng, (err) => {
if (err) {
// handle language change error
}
const pathnameParts = window.location.pathname.split("/");
const currentLangPath = pathnameParts[1]; // skips the first slash
let newPathnameParts = pathnameParts;
if (i18n.options.supportedLngs.includes(currentLangPath)) {
newPathnameParts = newPathnameParts.slice(2); // removes the lang part
}
newPathnameParts = [lngSubPaths[lng]].concat(
newPathnameParts.filter(Boolean)
);
const newPathname = newPathnameParts.join("/");
if (newPathname !== window.location.pathname) {
window.history.pushState(null, "", newPathname);
}
});
};

工作代码沙箱示例