title: How to configure localization with react router and i18 directly from url as language params?
body: <p>I am very new to implementing translations to my projects. By reading documentation and following tutorials i am now able to use translation just by defining the language as default one. But what i want to do is, i need to have default language as in english and when i do <a href="http://www.example.com/de" rel="nofollow noreferrer">www.example.com/de</a> i want to see the german translations of the texts. And i want to only do that through params and not with clicking into any button and translate. I will share some parts of my code below:</p>
  <p>i18n.js</p>
  <pre><code>import i18n from &quot;i18next&quot;;
  import { initReactI18next } from &quot;react-i18next&quot;;
  
  // //local imports
  import en from &quot;./locales/en.json&quot;;
  import de from &quot;./locales/de.json&quot;;
  
  let language = localStorage.getItem(&quot;language&quot;);
  
  if (language === undefined) {
    language = &quot;de&quot;;
   }
  
  i18n.use(initReactI18next).init({
   resources: {
     en: { translations: en },
     de: { translations: de },
   },
   fallbackLng: &quot;de&quot;,
   lng: &quot;de&quot;,
   // debug only when not in production
   debug: process.env.NODE_ENV !== &quot;production&quot;,
   ns: [&quot;translations&quot;],
   defaultNS: &quot;translations&quot;,
   keySeparator: false,
   interpolation: {
     escapeValue: false,
     formatSeparator: &quot;,&quot;,
   },
   react: {
     wait: true,
   },
  });
  
  export default i18n;
  </code></pre>
  <p>and in the below i add my react routing in my app component</p>
  <pre><code>App.js
   &lt;div className=&quot;App&quot;&gt;
    &lt;BrowserRouter&gt;
      &lt;Switch&gt;
        &lt;Route
          path=&quot;/&quot;
          exact
          render={() =&gt; &lt;ForgotPassword data={data} /&gt;}
        &gt;&lt;/Route&gt;
        &lt;Route path=&quot;/success&quot; component={Success}&gt;&lt;/Route&gt;
        &lt;Route
          path=&quot;/change-password&quot;
          render={() =&gt; &lt;ChangePassword data={data} /&gt;}
        &gt;&lt;/Route&gt;
      &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;
  &lt;/div&gt;
  </code></pre>
  <p>as of now the language is translated to german by using useTranslation in the components example: {t(&quot;Please enter a valid email&quot;)} so this is getting translated.</p>
  <p>I would really appreciate any help. Thanks</p>