Переключатель языков с Lingui (i18n), я хочу, чтобы выбранный язык оставался во всем приложении даже после обновления

Question

https://github.com/Kayracz/Lingui-Tutorial

Я пробую Lingui для i18n приложения. Я создал переключатель языка на основе документации и руководства, но я хотел знать, как мне его настроить, чтобы каждый раз, когда я выбираю язык в приложении, он оставался во всем приложении даже после обновления.

На данный момент я могу переключать его и менять страницы, но каждый раз, когда я обновляю, он возвращается на английский.

вот мои файлы:

index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { I18nProvider } from "@lingui/react";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

async function loadMessages(language) {
    return await import(`@lingui/loader!./locales/${language}/messages.json`);
}

const LocalizedApp = () => {
    const [catalogs, setCatalogs] = useState({});
    const [language, setLanguage] = useState("");

    async function handleLanguageChange(language) {
        const newCatalog = await loadMessages(language);

        const newCatalogs = { ...catalogs, [language]: newCatalog };

        setCatalogs(newCatalogs);
        setLanguage(language);
    }

    return (
        <BrowserRouter>
            <I18nProvider language={language} catalogs={catalogs}>
                <App
                    language={language}
                    onLanguageChange={handleLanguageChange}
                />
            </I18nProvider>
        </BrowserRouter>
    );
};

ReactDOM.render(<LocalizedApp />, document.getElementById("root"));

App.js

import React from "react";
import "./styles/App.css";
import { Switch, Route } from "react-router-dom";
import { Trans } from "@lingui/macro";
import Home from "./Home.js";
import About from "./About.js";
import Contact from "./Contact.js";
import Navigation from "./Navigation.js";
import LanguageSelector from "./LanguageSelector";

const Main = () => (
    <Switch>
        <Route exact path="/" component={Home}></Route>
        <Route exact path="/about" component={About}></Route>
        <Route exact path="/contact" component={Contact}></Route>
    </Switch>
);

const App = ({ language, onLanguageChange }) => {
    return (
        <div className="App">
            <Trans id="navigation.title">
                <h1 style={{ margin: 26 }}>Playground</h1>
            </Trans>
            <Navigation />
            <header className="App-header">
                <Main />
                <LanguageSelector
                    language={language}
                    onChangeLangage={onLanguageChange}
                />
            </header>
        </div>
    );
};

export default App;

languageSelector.js

import React from "react";

const LanguageSelector = ({ language, onChangeLangage }) => {
    const handleChange = (event) => {
        event.preventDefault();

        onChangeLangage(event.target.value);
    };

    return (
        <div className="select">
            <select onChange={handleChange} value={language}>
                <option value="en">English</option>
                <option value="fr">Français</option>
                <option value="es">Español</option>
            </select>
        </div>
    );
};

export default LanguageSelector;

Answer 1

Вы можете сохранить свой язык на localStorage. LocalStorage API позволяет сохранить ваш язык после обновления нескольких страниц. Это способ сохранения значений в браузере.

поскольку localStorage хранится как key:valueпара. Вы можете сохранить свое языковое значение с помощью ключа и использовать тот же ключ для получения значения.

const LANGUAGE_KEY = 'language';

const LocalizedApp = () => {
    const [catalogs, setCatalogs] = useState({});
    const [language, setLanguage] = useState("");

    async function handleLanguageChange(language) {
        const newCatalog = await loadMessages(language);

        const newCatalogs = { ...catalogs, [language]: newCatalog };


        localStorage.setItem(LANGUAGE_KEY, language);
        setCatalogs(newCatalogs);
        setLanguage(language);
    }

    React.useEffect(() => {
      const persistedLanguage = localStorage.getItem(LANGUAGE_KEY)
      if (language !== persistedLanguage) {
        setLanguage(persistedLanguage);
      }
    }, [])

    return (
        <BrowserRouter>
            <I18nProvider language={language} catalogs={catalogs}>
                <App
                    language={language}
                    onLanguageChange={handleLanguageChange}
                />
            </I18nProvider>
        </BrowserRouter>
    );
};