title: Read i18n from different JSON files [React-i18nnext]
body: <p>I am new to react-i18nnext library. I try to separate my translations into files so that each page has a separate JSON-file and not one single.</p>
  
  <p>I am confused about how to do the following step from <a href="https://react.i18next.com/guides/multiple-translation-files" rel="nofollow noreferrer">this guide</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/N6NNX.png" width="500"></p>
  
  <hr>
  
  <h1>How am I trying to implement i18n from other files:</h1>
  
  <p>I am using the following code to call default <code>translate.json</code> file:  </p>
  
  <pre><code>&lt;h1&gt;{t('title')}&lt;/h1&gt;
  </code></pre>
  
  <p>But I want to call a different file, so I have to use according to the guide:  </p>
  
  <pre><code>&lt;h1&gt;{t('test:title')}&lt;/h1&gt;
  </code></pre>
  
  <p>if I use file <code>translation.json</code> - everything works, but if I am using another name of the file - it fails with error:</p>
  
  <pre><code>i18next::translator: missingKey en test title title
  </code></pre>
  
  <p>files in my app:<br>
  <a href="https://i.stack.imgur.com/6hn9Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6hn9Q.png" alt="enter image description here"></a></p>
  
  <hr/>
  
  <h2>Other code</h2>
  
  <p>I followed the <a href="https://react.i18next.com/latest/using-with-hooks" rel="nofollow noreferrer">"Step by Step"</a> guide on the official page of the library.</p>
  
  <p>Here's my <code>i18n.js</code> file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';
  
  import Backend from 'i18next-http-backend';
  import LanguageDetector from 'i18next-browser-languagedetector';
  // not like to use this?
  // have a look at the Quick start guide
  // for passing in lng and translations on init
  
  
  const languages = ['en', 'de', 'et'];
  
  i18n
      /*
       load translation using http -&gt; see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
       learn more: https://github.com/i18next/i18next-http-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({
          lng:"ee",
          fallbackLng: 'et', // use et if detected lng is not available
          saveMissing: true, // send not translated keys to endpoint
          debug: true,
          whitelist: languages,
  
          // backend: {
          //     // for all available options read the backend's repository readme file
          //     loadPath: '/locales/{{lng}}/{{ns}}.json'
          // },
  
          react: {
              useSuspense: false
          }
      })
  
  
  export default i18n;
  </code></pre>
  
  <p>For a better overview, I added my code  to codesandbox:</p>
  
  <p><a href="https://codesandbox.io/s/vibrant-black-s40r5?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit vibrant-black-s40r5"></a></p>