i18next刷新页面后恢复默认语言，如何保留用户选择？

问题说明 #

React项目用i18next实现多语言，默认加载DE语言，切换TR/EN后功能正常，但页面刷新会回到DE语言。需要实现：

1. 保留用户最后选择的语言
2. 优先读取浏览器默认语言

已尝试无效的方案：

• 移除fallbackLng，触发Hydrogen错误
• 设置fallbackLng为localStorage.getItem('i18nextLng') || 'de'，提示localStorage未定义
• 直接设置lng:'de'
• 尝试配置语言检测器但未成功

解决步骤 #

核心是正确启用并配置i18next的浏览器语言检测器，它会自动处理浏览器语言检测和用户选择语言的持久化，同时兼容服务端渲染场景（比如Next.js）。

1. 启用语言检测器 #

你已经导入了I18nextBrowserLanguageDetector，但未在i18n初始化时启用，需要添加.use(I18nextBrowserLanguageDetector)。

2. 配置检测规则 #

指定检测优先级（优先读用户存在localStorage的选择，再读浏览器语言，最后用默认），并限制只支持我们的语言列表，避免无效语言触发错误。

3. 兼容服务端渲染 #

服务端环境没有window和localStorage，初始化时要做环境判断，避免报错。

修改后的代码 #

i18n.js #

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from '../locales/en.json';
import trTranslation from '../locales/tr.json';
import deTranslation from '../locales/de.json';
import I18nextBrowserLanguageDetector from 'i18next-browser-languagedetector';

const resources = {
    en: { translation: enTranslation },
    tr: { translation: trTranslation },
    de: { translation: deTranslation },
};

// 语言检测器配置：优先级、存储键、语言白名单
const detectorOptions = {
    order: ['localStorage', 'navigator', 'htmlTag'], // 先读本地存储，再读浏览器语言
    lookupLocalStorage: 'i18nextLng', // 存储用户选择语言的localStorage键名
    checkWhitelist: true // 只检测我们支持的语言
};

i18n
    .use(I18nextBrowserLanguageDetector) // 启用语言检测器
    .use(initReactI18next)
    .init({
        resources,
        debug: true,
        fallbackLng: 'de',
        whitelist: ['en', 'tr', 'de'], // 限制支持的语言列表
        detection: detectorOptions,
        interpolation: {
            escapeValue: false,
        },
        // 服务端渲染兼容：仅在浏览器环境读取localStorage
        lng: typeof window !== 'undefined' ? localStorage.getItem('i18nextLng') : 'de',
    }).catch(e => console.log(e));

export default i18n;

LanguageSelect.tsx（优化） #

处理语言代码的地区后缀（比如en-US转en），保证下拉框选中值正确：

import React from 'react';
import { useTranslation } from 'react-i18next';

const LanguageSelection = () => {
    const { i18n } = useTranslation();
    // 提取语言代码的前两位，兼容带地区的语言标识
    const currentLang = i18n.language.split('-')[0];

    const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
        i18n.changeLanguage(event.target.value);
    };

    return (
        <div style={{ zIndex: 99 }}>
            <select 
                className='text-sm' 
                value={currentLang} 
                id="language" 
                onChange={handleLanguageChange}
            >
                <option value="en">EN</option>
                <option value="tr">TR</option>
                <option value="de">DE</option>
            </select>
        </div>
    );
};

export default LanguageSelection;

方案说明 #

• 语言检测器会自动把用户选择的语言保存到localStorage，刷新页面时自动读取，无需手动操作
• 优先读取用户之前的选择，其次是浏览器默认语言，最后 fallback 到DE
• 服务端渲染场景下，通过typeof window !== 'undefined'避免访问不存在的localStorage
• 白名单配置确保只加载我们支持的语言，避免无效语言报错

内容的提问来源于stack exchange，提问作者Emir Akyüz