使用Linguii18n进行语言切换，我希望选择的语言即使在刷新后也能保留在整个应用程序中

问题描述

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

我正在为应用程序的i18n试用Lingui。我根据文档和教程创建了一个语言切换器，但是我想知道应该如何设置它，以便每次在应用程序中选择一种语言时，即使在刷新时，该语言切换器仍会保留在整个应用程序中。

目前，我可以切换它和更改页面，但是每次刷新时，它都会回到英语。

这是我的文件：

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;

解决方法

您可以将语言存储在{​​{1}}上。 LocalStorage API允许您在多次刷新页面后保持语言。这是浏览器保留值的方法。

由于localStorage作为localStorage对存储。您可以使用 一个键并使用相同的键来检索值。

key:value