如何使用react路由器和i18作为语言参数直接从url配置本地化？

Question

我对翻译到我的项目是非常新的。通过阅读文档和以下教程，我现在能够使用翻译，只需将语言定义为默认语言即可。但我想做的是，我需要默认的语言，如英语，当我做www.example.com/de，我想看看德文翻译的文本。我只想通过平行线来做这件事，而不是点击任何按钮来翻译。下面我将分享我的代码的一些部分：

i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// //local imports
import en from "./locales/en.json";
import de from "./locales/de.json";

let language = localStorage.getItem("language");

if (language === undefined) {
  language = "de";
 }

i18n.use(initReactI18next).init({
 resources: {
   en: { translations: en },
   de: { translations: de },
 },
 fallbackLng: "de",
 lng: "de",
 // debug only when not in production
 debug: process.env.NODE_ENV !== "production",
 ns: ["translations"],
 defaultNS: "translations",
 keySeparator: false,
 interpolation: {
   escapeValue: false,
   formatSeparator: ",",
 },
 react: {
   wait: true,
 },
});

export default i18n;

在下面，我将我的反应性路由添加到我的app组件中。

App.js
 <div className="App">
  <BrowserRouter>
    <Switch>
      <Route
        path="/"
        exact
        render={() => <ForgotPassword data={data} />}
      ></Route>
      <Route path="/success" component={Success}></Route>
      <Route
        path="/change-password"
        render={() => <ChangePassword data={data} />}
      ></Route>
    </Switch>
  </BrowserRouter>
</div>

到目前为止，通过在组件示例中使用useTranslation将语言翻译成德语：{t(“请输入有效的电子邮件”)}，因此正在翻译。

我真的很感谢你的帮助。谢谢

Answer 1

需要将检测到的语言添加到路径中。正如文档建议的那样，您可以在init选项中按下面的顺序进行排序。添加i18next-browser-languagedetector作为依赖项，并按以下顺序设置顺序。

detection: {
      order: ["path", "localStorage", "htmlTag", "subdomain"],
      lookupFromPathIndex: 0,
      checkWhitelist: true,
    },