重定向回默认语言i18n

Question

如何在i18n中设置默认语言？问题是当用户在路径中没有插入任何现有语言时，页面正在消失。定义的语言是=> en，es，ar。我希望将默认语言设置为"EN"，当用户在路径中插入(例如"ru“)时，用户重定向回英语。

以下是i18n.js的代码

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 options = {
    loadPath: "./public/locales/{{lng}}/{{translation}}.json",
}

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: "en",
        debug: true,
        // lng: "en",
        whitelist: ["en", "es", "ar"],
        keySeparator: false,
        checkWhitelist: true,
        detection: {
            order: ['path', 'cookie', 'htmlTag', 'localStorage', 'subdomain'],  
            lookupFromPathIndex: 0,
            caches: ['cookie'],
            checkWhitelist: true,
        },  
    });
export default i18n;

请考虑到这里不能定义液化天然气。当我使用液化天然气时，翻译不起作用。

文件: Route.js

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

const Router = () => {
    const baseRouteUrl = "/:locale(es|en|ar)?";
    return (
        <Switch>
            <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>
                        )
                    }}
                />

文件: Menu.jsx

<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
     <Menu.Item key="1" active icon={<HomeOutlined />}>
      {
           <Link to={baseUrl() + "/dashboard"}>
               {t("DASHBOARD")}
           </Link>
       }
     </Menu.Item>

Answer 1

您可以编写一个带有regex路径的Route，该路径位于所有路由的末尾，以捕获所有路径并重定向。

<Route
  path="/:lang([A-Za-z]{2})?/:rest*"
  render={props => {
    // availabeLanguages is an array of language codes
    if (!availableLanguages.includes(props.match.params.lang)) {
      // depending on your configuration you may need 
      // to set the language to your default language before return
      return (<Redirect to={`/${props.match.params.rest}`}/>);
    }
  }}/>