ReactJS — Как создать резервную языковую функцию с помощью localeStorage

Я не могу решить, что делать с моим языковым приложением. Как вы можете видеть ниже, я использую "window.localStorage.setItem(LOCAL_STORAGE_KEY, locale);" чтобы получить локаль браузера. У меня два языка es и en. Но когда у кого-то есть другой язык, отличный от es или en, например, когда он обнаруживает язык с наследованием локали, например: «es-ES»

(Передано здесь: (/imports/cuadds/both/locales/${locale}/messages)) Я получаю такие ошибки, как:

Error: Cannot find module '/imports/cuadds/both/locales/es-ES/messages'

Как я могу создать функцию, которая делает локаль по умолчанию en или es, когда язык не найден?

import { i18n } from "@lingui/core";
import { detect, fromStorage, fromNavigator } from "@lingui/detect-locale";
import { en, es } from "make-plural/plurals";

let isActivated;

const startupI18n = () => {
    if (isActivated) return;
    isActivated = true;

    i18n.loadLocaleData({
        en: { plurals: en },
        es: { plurals: es },
    });

    dynamicActivate(getLocale());
};

export default startupI18n;

const LOCAL_STORAGE_KEY = "lang";

// defines where the locale falls back to (passed to dynamicActivate)
const DEFAULT_LOCALE = "es";

/**
 * Load messages for requested locale and activate it.
 */
export async function dynamicActivate(locale) {
    try {
        const module = await import(`/imports/cuadds/both/locales/${locale}/messages`);

        i18n.load(locale, module.messages);
        i18n.activate(locale);

        // saves the language to the localStorage
        window.localStorage.setItem(LOCAL_STORAGE_KEY, locale);
    } catch (error) {
        console.info(error);
    }
};

function getLocale() {
    const detectedLocale = detect(
        fromStorage("LOCAL_STORAGE_KEY"),
        fromNavigator(), 
        DEFAULT_LOCALE,
    );
    return detectedLocale;
}
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
0
0
221
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знаком с используемой вами библиотекой, но будет ли это работать?

function getLocale() {
    const detectedLocale = detect(
        fromStorage("LOCAL_STORAGE_KEY"),
        fromNavigator(), 
        DEFAULT_LOCALE,
    );

    // if detectedLocale is 'en' or 'es' return
    if (['en', 'es'].indexOf(detectedLocale) >= 0) {
        return detectedLocale
    }
    // else return default value
    return DEFAULT_LOCALE;
}

Другие вопросы по теме