React i18n输入无效路径语言时如何设置默认EN语言并重定向？

核心问题是你当前的路由规则仅匹配en/es/ar三个合法语言前缀，当出现不在白名单的语言标识时无对应路由匹配，就会出现空白页，按以下步骤修改即可：

1. 路由层增加非法语言重定向逻辑 #

修改Route.js文件，在<Switch>标签最顶部新增路由校验规则，匹配所有两位字母开头的路径前缀，校验不通过直接重定向到英文路径：

import { Switch, Route, Redirect } from 'react-router-dom'; // 确保引入Redirect

export const baseUrl = () => {
    return (
        i18n.language === 'en' ? '' : '/' + i18n.language
    )
};

const Router = () => {
    const baseRouteUrl = "/:locale(es|en|ar)?";
    const validLangs = ["en", "es", "ar"];
    return (
        <Switch>
            {/* 新增：校验路径前缀的语言是否合法 */}
            <Route 
                path="/:locale([a-z]{2})/*" 
                render={({ match, location }) => {
                    if (!validLangs.includes(match.params.locale)) {
                        // 保留原路径后缀，仅替换非法语言为en
                        const pathSuffix = location.pathname.split('/').slice(2).join('/');
                        return <Redirect to={pathSuffix ? `/en/${pathSuffix}` : '/en'} />
                    }
                    return null;
                }}
            />
            <Route exact path="/" component={Options} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />

            <PrivateRoute exact path={baseRouteUrl + "/dashboard"}
                    render={(props) => {
                        return (
                            <MainLayout>
                                <DashboardPage />
                            </MainLayout>
                        )
                    }}
                />
        </Switch>
    )
};

2. 修复i18n配置的翻译文件加载问题 #

你当前i18n配置中定义了backend加载参数但没有传入，同时路径变量写错会导致翻译文件加载失败，这也是你之前设置lng参数后翻译失效的原因之一，修改如下：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const languages = ["en", "es", "ar"]
const backendOptions = {
    // 修正路径变量，{{ns}}对应默认的translation命名空间
    loadPath: "./public/locales/{{lng}}/translation.json",
}

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: "en",
        debug: true,
        // lng: "en", 保持注释，符合你的要求
        whitelist: languages,
        keySeparator: false,
        checkWhitelist: true,
        detection: {
            order: ['path', 'cookie', 'htmlTag', 'localStorage', 'subdomain'],  
            lookupFromPathIndex: 0,
            caches: ['cookie'],
            checkWhitelist: true,
        },
        // 新增：传入backend配置
        backend: backendOptions
    });
export default i18n;

修改完成后即可实现预期效果：访问/ru/dashboard这类带非法语言标识的路径会自动重定向到/en/dashboard，翻译正常加载，无需手动设置lng参数。

内容的提问来源于stack exchange，提问作者user16050054