Estou querendo adicionar uma internacionalização com i18next no meu projeto react porem esta um erro, ressalto que sou iniciante e nao tenho tanta noção em react ainda, segue abaixo as prints, ressalto tambem que instalei todas dependencias normalmente
print da estrutura do projeto print do erro
Acredito que exista varios erros ainda no projeto, se poderem me enviar o codigo solucionado ficarei bem feliz, ja tentei resolver com nosso colega chatgpt mas nada.
App.js:
// src/App.js
import React, { useEffect, useState } from 'react';
import { setupNavbarScroll } from './anim/anim.js';
import './styles/App.css';
import { useTranslation } from 'react-i18next';
import i18n, { DEFAULT_LNG } from './i18n'; // Importando DEFAULT_LNG e i18n do arquivo i18n.js
function Navbar() {
return (
<nav className="navbar">
<div className="logo">
<span>IFmaker</span>
</div>
<div className="links">
<a className="navlink" href="#">Inicio</a>
<a className="navlink" href="#">Agendamento</a>
<a className="navlink" href="#">Equipe</a>
<a className="navlink" id="navref1" href="#">Estações</a>
<a id="navref2" href="#">Atendimento</a>
</div>
</nav>
);
}
function MainSection() {
return (
<main className="principaltopo">
<div className="headline">
<h1 id="refifmaker1"><span id="refifmaker" style={{ color: '#8764B8' }}>IFmaker</span> - Seu Espaço de Criação</h1>
<p>Bem-vindo ao <strong>IF Maker - Campus Palmares</strong>, onde a imaginação ganha vida por meio da tecnologia e da colaboração.</p>
</div>
<div className="headlinebtns">
<a href="" className="headlinebtn">Conheça Nossos Equipamentos</a>
<a href="" className="headlinebtn">Participe de Uma Oficina</a>
</div>
</main>
);
}
function ProjectCard({ title, description }) {
return (
<article className="card">
<div className="card-img item1">
<div className="card-imgs pv delete"></div>
</div>
<div className="project-info">
<div className="flex">
<div className="project-title">{title}</div>
</div>
<span className="lighter">{description}</span>
</div>
</article>
);
}
export default function App() {
useEffect(() => {
// setupNavbarScroll(); // Esta função não está definida aqui, então comentei-a
}, []);
const [lng, setLng] = useState(DEFAULT_LNG); // Adicionei a declaração de estado para lng
const { t } = useTranslation(); // Corrigi a importação de useTranslation
const updateLang = language =>
i18n.changeLanguage(language)
.then(() => setLng(language))
.catch(e => console.log(e));
return (
<div className="App">
<h1>{t(`language.${lng}`)}</h1>
<h1>{t("hello-world")}</h1>
<button onClick={() => updateLang("en-US")}>en-US</button>
<button onClick={() => updateLang("pt-BR")}>pt-BR</button>
<p>{t("interpolation", { value: lng })}</p>
</div>
);
}
i18n.js:
// src/i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { resources } from './locales';
export const DEFAULT_LNG = 'en-US'; // Defina o idioma padrão aqui
i18n
.use(LanguageDetector)
.init({
compatibilityJSON: 'v4',
fallbackLng: DEFAULT_LNG,
resources,
detection: {
order: ['navigator', 'querystring', 'cookie', 'localStorage', 'htmlTag', 'path', 'subdomain'],
caches: ['localStorage', 'cookie'],
},
});
export default i18n;
index.js:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import App from './App';
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>,
document.getElementById('root')
);
import { resources } from './locales';
Onde está o export correspondente a esta importação ? Essa importação espera um ficheirolocales.js
no mesmo local ondei18n.js
está o que não corresponde à estrutura que vejo que indicou.