如何在使用 i18next 的 onLanguageChange 侦听器更改语言后 change/replace window 的位置语言环境？

Question

我目前正在使用 React-Router-Dom v6、i18next 和 React-i18next。

我希望 location/link 中的区域设置在应用程序内的任何位置切换语言后更改。所以我有这个监听器来检查语言变化：

./i18n.js

i18n.on('languageChanged', (lng) => {
  const { location } = window;
  location.replace('/ar/', `/${lng}/`).replace('/en/', `/${lng}/`);
});

const baseRouteUrl = '/:locale/';

问题是，一旦我重新加载页面，我就会看到一个无限循环。很明显是上位位置替换导致的。

我将如何修改侦听器以确保语言更改不会无限 reload/rerender？

Answer 1

最终使用正则表达式来匹配语言环境并动态替换它们：

i18n.on('languageChanged', (lng) => {
  const { location } = window;
  console.log(location.pathname, 24242424);
  if (location.pathname.match(/\/ar\/|\/en\//) && !location.pathname.includes(`/${lng}`)) {
    const newUrl = location.pathname.replace(/\/ar\/|\/en\//, `/${lng}/`);
    location.replace(newUrl);
  }
});

如何在使用 i18next 的 onLanguageChange 侦听器更改语言后 change/replace window 的位置语言环境？

How to change/replace window's location locale after changing language using i18next's onLanguageChange listener?

reactjs

react-router-dom

react-i18next