React-i18next: Translation not loaded when React Router matches a param in the URL

[paulrberg]

Describe the bug
Translations are not loaded when there's a matched param in the URL (matched by React Router).

Occurs in react-i18next version
Version 10.9.0.

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots

It works without the txHash param:

It doesn't work with the "txHash" param:

OS (please complete the following information):

• Device: MBP 2016 15"
• Browser: Brave Version 0.62.51 Chromium: 73.0.3683.103
• React: 16.8.6
• React Redux: 6.0.1
• React Router: 5.0.0
• Connected React Router: 6.4.0

Context

This is how I load i18n and how I use connected-react-router:

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    backend: resources,
    debug: process.env.NODE_ENV !== "production",
    fallbackLng: "en",
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

<div id="app-container">
  <MediaQuery query="(min-width: 768px)">
    <Header />
  </MediaQuery>
  <Web3Connect />
  <ConnectedRouter className="app-container" history={history}>
    <Switch>
      <Route exact path="/" component={PayWithSablier} />
      <Route exact path="/dashboard" component={Dashboard} />
      <Route exact path="/stream/:txHash?" component={Stream} />
      <Redirect exact to="/" />
    </Switch>
    <NetworkWarning />
  </ConnectedRouter>
</div>

[jamuhl]

There is the "failed because parsing" message -> check why the loaded translations are invalid JSON

[paulrberg]

Can't believe it 🤦‍♂️

Fixed the issue by replacing the following:

const resources = {
  loadPath: "./locales/{{lng}}.json",
};

With this:

const resources = {
  loadPath: "/locales/{{lng}}.json",
};

Most likely, React Router fiddles with the location of the "locales" files when there's a custom query in the URL.

This may have something to do with https://github.com/i18next/react-i18next/issues/431