0

我正在为应用程序的 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"));

应用程序.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;

语言选择器.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;
4

1 回答 1

2

您可以将您的语言存储在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>
    );
};
于 2020-10-05T15:33:57.350 回答