如何在更改语言时翻译 location URL？

Question

我目前在一个网站的本地化过程中碰壁了。使用 i18next，我们所有的路由都被翻译，默认语言的语言环境路径从 URL.

中删除

换句话说：
/accueil -> /en/home
/产品 -> /en/products
等等...

我的问题是，当我更改语言时，url 不会跟随（这是预料之中的，因为 i18next 不直接与 react-router 对话）。

i18下一个配置：

i18n
  .use(detector)
  .use(initReactI18next)
  .init({
    whitelist: ['fr', 'en'],
    fallbackLng: 'fr',
    defaultNS: 'common',

    detection: {
      lookupFromPathIndex: 0,
      checkWhitelist: true
    },

    interpolation: {
      escapeValue: false
    },

    resources: {
      en: {
        routes: enRoutes,
        [...]
      },
      fr: {
        routes: frRoutes,
        [...]
      }
    }
  });

fr/routes.json:

{
  "home": "/accueil",
  "products": "/produits",
  [...]
}

en/routes.json:

{
  "home": "/en/home",
  "products": "en/products",
  [...]
}

app.jsx中的路由器部分：

<Router forceRefresh>
  <Switch>
    <Route path={`/:locale(en|fr)?${t('routes:home')}`} component={HomeComponent} />
    <Route path={`/:locale(en|fr)?${t('routes:products')}`} component={ProductsComponent} />
  </Switch>
</Router>

使用以下配置，页面呈现没有问题，并且在调用 i18n.changeLanguage 时可以轻松转换，但 url 不会随之改变。我到处搜索，但似乎无法找到在语言更改后翻译 url 的首选方法。

我还想处理用户直接在浏览器 url 字段中手动更改语言环境的情况。

我已经尝试在 i18next 的 'languageChanged' 事件上更新 url，但是找到当前页面的密钥增加了很多复杂性。

提前感谢提供的任何帮助。

Answer 1

我终于找到了一种简单明了的方法来更改路线同时更改语言。

  const changeLanguage = (nextLanguage) => {
    const routes = i18n.getResourceBundle(i18n.language, 'routes');
    const currentPathname = window.location.pathname.replace(/\/+$/, '');
    const currentRouteKey = Object.keys(routes).find((key) => routes[key] === currentPathname);

    window.location.replace(t(`routes:${currentRouteKey}`, { lng: nextLanguage }));
  };

我还需要更改 i18next 检测选项如下：

detection: {
  order: ['path', ...otherMethods]
  lookupFromPathIndex: 0,
  checkWhitelist: true
},

我现在可以在任何地方安全地调用此 changeLanguage 包装器，它将处理语言更改（如果它不是 url 的一部分，则使用默认设置）和路由更改。

如何在更改语言时翻译 location URL？

How to translate location URL when changing language?

localization

internationalization

i18next

react-router

react-i18next