【问题标题】:reactJS i18n reloading pagereactJS i18n 重新加载页面
【发布时间】:2020-10-26 21:16:07
【问题描述】:

我在我的 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);
    };

【问题讨论】:

    标签: javascript reactjs i18next react-i18next


    【解决方案1】:

    你如何改变语言?使用查询字符串?

    如果您致电i18next.changeLanguage(lng);,则不会有任何变化,只需用新语言重新渲染...

    作为示例,请参阅:https://github.com/i18next/react-i18next/blob/master/example/webpack2/app/components/View.js#L50

    【讨论】:

    • 是的,我就是这样做的。我在上面添加了 i18next.js + 语言更改
    • 每次我更改语言时,我都会被重定向到 /
    • 这与 i18next 无关——它甚至根本不知道路由。您是否在语言更改中添加了一些侦听器并在那里重定向...必须是您添加的一些代码。查看示例 - 它更改语言而不重新加载页面或路由...
    【解决方案2】:

    有同样的问题。我正在使用 i18n-js 并对清单堆栈和选项卡做出反应。这个帖子是我在互联网上唯一能找到的。但是,它并没有引导我找到解决方案。无论如何,我仍然设法解决它并分享我的解决方案。

    检查您是否还翻译了堆栈和选项卡的名称,很可能应该是选项卡之一。翻译后的名称将使反应导航丢失,因为它不再识别路线中记录的页面,因为选项卡名称在另一种语言中是全新的。这就是为什么它会跳转到任何它发现它是所有导航器顶部的页面。解决方法是为要翻译和显示的文本使用标签,同时为页面保留静态名称。

    【讨论】:

    • 这不是解决方法,这是正确的方法。路由名称就像变量名称,它们不应该被翻译。标签/标题用于用户可见的文本。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-05
    • 2018-04-22
    • 2019-01-31
    • 2020-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多