Блог

Как я могу установить язык по умолчанию в 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>