Update App.js:
import React from 'react';
import { useTranslation } from 'react-i18next';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
import { routes } from './routes';
import './i18n';
const LanguageSwitcher = () => {
const { i18n } = useTranslation();
const navigate = useNavigate();
const switchLang = (lang) => {
const currentPath = window.location.pathname;
const currentPage = currentPath.split('/')[1];
i18n.changeLanguage(lang).then(() => {
// Re-map path using new language
const t = i18n.getFixedT(lang);
const mappedRoutes = {
en: { accueil: 'home', 'a-propos': 'about-us' },
fr: { home: 'accueil', 'about-us': 'a-propos' },
};
const newPath = `/${mappedRoutes[lang][currentPage] || ''}`;
navigate(newPath);
});
};
return (
<div className="lang-switch">
<button onClick={() => switchLang('en')}>EN</button>
<button onClick={() => switchLang('fr')}>FR</button>
</div>
);
};
const App = () => {
const { t } = useTranslation();
return (
<BrowserRouter>
<LanguageSwitcher />
<Routes>
{routes(t).map((route, idx) => (
<Route key={idx} path={route.path} element={route.element} />
))}
</Routes>
</BrowserRouter>
);
};
export default App;