reactJS i18n 重新加载页面
reactJS i18n reloading page
我在我的 reactjs 应用程序中使用 react-i18next。
问题是当我更改语言时应用程序重新加载并始终从主路径开始。
有没有办法在不重新加载页面的情况下在同一页面上重定向或更改语言?
谢谢
更新
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 common 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;
更改语言:
const { t, i18n } = this.props;
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};
如何切换语言?使用查询字符串?
如果您调用 i18next.changeLanguage(lng);
将不会有任何变化,只需以新语言重新呈现...
示例见:https://github.com/i18next/react-i18next/blob/master/example/webpack2/app/components/View.js#L50
有同样的问题。我正在使用 i18n-js 和 react 导航来显示堆栈和选项卡。这个线程是我在互联网上唯一能找到的线程。但是,它并没有引导我找到解决方案。不管怎样,我还是设法解决了这个问题,并会分享我的解决方案。
检查您是否也翻译了堆栈和选项卡的名称,很可能应该是选项卡一。翻译后的名称将使 React 导航丢失,因为它不再识别路由中记录的页面,因为选项卡名称是另一种语言的全新名称。这就是为什么它会跳转到所有导航器顶部的页面。解决方法是对要翻译和显示的文本使用标签,同时为页面保留静态名称。
我在我的 reactjs 应用程序中使用 react-i18next。
问题是当我更改语言时应用程序重新加载并始终从主路径开始。
有没有办法在不重新加载页面的情况下在同一页面上重定向或更改语言?
谢谢
更新
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 common 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;
更改语言:
const { t, i18n } = this.props;
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};
如何切换语言?使用查询字符串?
如果您调用 i18next.changeLanguage(lng);
将不会有任何变化,只需以新语言重新呈现...
示例见:https://github.com/i18next/react-i18next/blob/master/example/webpack2/app/components/View.js#L50
有同样的问题。我正在使用 i18n-js 和 react 导航来显示堆栈和选项卡。这个线程是我在互联网上唯一能找到的线程。但是,它并没有引导我找到解决方案。不管怎样,我还是设法解决了这个问题,并会分享我的解决方案。
检查您是否也翻译了堆栈和选项卡的名称,很可能应该是选项卡一。翻译后的名称将使 React 导航丢失,因为它不再识别路由中记录的页面,因为选项卡名称是另一种语言的全新名称。这就是为什么它会跳转到所有导航器顶部的页面。解决方法是对要翻译和显示的文本使用标签,同时为页面保留静态名称。