vite + react + typescript + i18next

I have trouble while adding i18next to my application, t('test') is not translate

This is my i18n.ts file

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enJSON from './locales/en.json';
import cnJSON from './locales/cn.json';
i18n.use(initReactI18next).init({
    resources: {
        en: { ...enJSON },
        cn: { ...cnJSON },
    }, 
    lng: "en", 
});

This is my App.tsx file

import { useState } from 'react'
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n: {changeLanguage, language} } = useTranslation();
  const [currentLanguage, setCurrentLanguage] = useState(language)

  const handleChangeLanguage = () => {
    const newLanguage = currentLanguage === "en" ? "cn" : "en";
    setCurrentLanguage(newLanguage);
    changeLanguage(newLanguage);
  }
  
  
  return (
    <div>
        <h1>
        {t('test')}
        </h1>
        <h3>
            Current Language: {currentLanguage}
        </h3>
        <button 
            type="button" 
            onClick={()=> handleChangeLanguage()}
        >
            Change Language
        </button>
    </div>
  )
}

export default App

In your main.ts or index.ts,

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { Component } from "react";
import { createRoot } from 'react-dom/client';
import App from './App';

// import i18n (needs to be bundled ;)) 
import './i18n';

const root = createRoot(document.getElementById('root'));
root.render(
  <App />
);

<!-- end snippet -->

or you can simply try wrapping your App component I18nextProvider (imported from 'react-i18next') and passing it the i18n instance you created, like this;

    <I18nextProvider i18n={i18n}>
        <App />
    <I18nextProvider />

excuse my english, did you try to change the path of the route? http://localhost:300/en/home or http://localhost:300/cn/home

for

{
  "translations": {
    "test": "test"
  }
}

use

t('translations:test')

It seems that you have initialized i18next correctly, but you need to ensure that your translation keys are correctly defined in your JSON files.

For example, if you have a translation key called "test" in your JSON files, it should look something like this:

en.json

  "test": "This is a test"

cn.json

  "test": "这是一个测试"

If your translation keys are defined correctly in your JSON files, then you can try the following steps to troubleshoot your issue:

Ensure that your JSON files are being loaded correctly by checking the network tab in your browser's developer tools. Make sure that the JSON files are being loaded and that their contents are correct.

Check your console for any errors related to i18next or react-i18next. If there are any errors, try to resolve them first.

Ensure that your translation key is being passed correctly to the t function. You can try logging the value of t('test') to see if it matches the expected translation.

If none of the above solutions work, you can try using the useEffect hook to force a re-render of your component when the language is changed. Here's an example:

import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n: {changeLanguage, language} } = useTranslation();
  const [currentLanguage, setCurrentLanguage] = useState(language)

  useEffect(() => {
    setCurrentLanguage(language);
  }, [language]);

  const handleChangeLanguage = () => {
    const newLanguage = currentLanguage === "en" ? "cn" : "en";
    setCurrentLanguage(newLanguage);
    changeLanguage(newLanguage);
  }
  
  return (
    <div>
        <h1>
        {t('test')}
        </h1>
        <h3>
            Current Language: {currentLanguage}
        </h3>
        <button 
            type="button" 
            onClick={()=> handleChangeLanguage()}
        >
            Change Language
        </button>
    </div>
  )
}

export default App

This code will re-render the component whenever the language changes, which should force the translations to update.