如何使用React-I18Next更改URL路径？

Question

在过去的几天里，我一直在为这个问题而苦苦挣扎。我有一个React应用程序，我正在尝试通过使用I18Next来使其多语言。我想根据选定的语言更改URL路径，例如http：// localhost：3000/en，http：// localhost：3000/bg，http：// http：// localhost：3000/en/nod/over of等

。i18n.ts文件：

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

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import i18next from 'i18next';

i18next.on('languageChanged', (lng) => { document.documentElement.setAttribute('lang', lng); })

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        supportedLngs: ['bg', 'en'],
        detection: {
            order: ['path', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag'],
            caches: ['cookie'],
            lookupFromPathIndex: 0,
        },
        fallbackLng: 'bg',

        backend: {
            loadPath: '/locales/{{ns}}/{{lng}}.json'
        },
        ns: ['common', 'home']
    });

export default i18n;

index.tsx：

const baseUrl = "/:locale(bg|en)?";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <CustomRouter history={customHistory}>
      <Suspense fallback='loading'>
        <Routes>
          <Route path={baseUrl + "/"} element={<App />}>
            <Route index element={<Home />} />
            <Route path={baseUrl + "catalog"} element={<Catalog />} />
            <Route path={baseUrl + "catalog/:id"} element={<ProductDetails />} />
            <Route path={baseUrl + "about"} element={<About />} />
            <Route path={baseUrl + "server-error"} element={<ServerError />} />
            <Route path="*" element={<NotFound />} />
          </Route>
        </Routes>
      </Suspense>
    </CustomRouter>
  </React.StrictMode>
);

这给了我以下控制台警告： 没有匹配的路由位置“/en/catalog”或我尝试的任何其他URL。

我想念什么？

编辑：我注意到我已经嵌套了路由，因此仅应将baseurl添加到父路由中：

const baseUrl = "/:locale(bg|en)?";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <CustomRouter history={customHistory}>
      <Routes>
        <Route path={`${baseUrl}/`} element={<App />}>
          <Route index element={<Home />} />
          <Route path={"catalog"} element={<Catalog />} />
          <Route path={"catalog/:id"} element={<ProductDetails />} />
          <Route path={"about"} element={<About />} />
          <Route path={"server-error"} element={<ServerError />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </CustomRouter>
  </React.StrictMode>
);

仍然无法解决问题，并且我确实获得了相同的控制台输出。

Answer 1

我不知道您的应用程序的大小和您的URI模式的复杂性，但是在这里，我们已将语言参数从uri更改为本地商店中的用户信息。

我们正在使用 rosetta ，这非常易于使用，并且也很容易从用户信息或用户信息中初始化。默认.env属性文件。