如何使用 react-i18next 更改 URL 路径？

Question

I've been struggling with this issue for the past couple of days. I have a React app and I am trying to make it multilingual by using i18next. I want to change the url path according to the selected language, eg http://localhost:3000/en, http://localhost:3000/bg, http://localhost:3000/en/about etc.

i18n.ts file:

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>
);

This gives me the following console warning: No routes matched location "/en/catalog" or any other url that I try.

What am I missing?

Edit: I've noticed that I have nested routing so the baseUrl should only be added to the parent route:

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>
);

That still doesn't fix the issue and I do get the same console output.

Answer 1

I don't know about the size of your application and complexity of your URI schema, but here, we have changed the language parameter from URI to user info in local store.

We're using Rosetta , that is incredibly simple to use and also very easy to initialize from user info or default .env properties file.