Ombrora/convert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(seo): pass lang as a prop to Header/LanguageSwitcher instead of useParams

Browse Source 
Since the vite-react-ssg migration replaced the dynamic /:lang route param
with literal /fr and /en routes, useParams().lang always returned undefined
here, breaking the header brand link (linked to /undefined/) and silently
breaking the language switcher (always resolved otherLang to 'fr').
This commit is contained in:
anthony
2026-08-02 10:58:23 +02:00
parent 74c676df9f
commit 6fc3386965
3 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Header.jsx
+3 -4
View File
@@ -1,10 +1,9 @@
import { Link, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { LanguageSwitcher } from './LanguageSwitcher.jsx'; import { LanguageSwitcher } from './LanguageSwitcher.jsx';
import { ThemeToggle } from './ThemeToggle.jsx'; import { ThemeToggle } from './ThemeToggle.jsx';
export function Header({ theme, onToggleTheme }) { export function Header({ lang, theme, onToggleTheme }) {
const { lang } = useParams();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
@@ -13,7 +12,7 @@ export function Header({ theme, onToggleTheme }) {
{t('brand')} {t('brand')}
</Link> </Link>
<div className="site-header-controls"> <div className="site-header-controls">
<LanguageSwitcher /> <LanguageSwitcher lang={lang} />
<ThemeToggle <ThemeToggle
theme={theme} theme={theme}
onToggle={onToggleTheme} onToggle={onToggleTheme}
frontend/src/components/LangLayout.jsx
+1 -1
View File
@@ -17,7 +17,7 @@ export function LangLayout({ lang }) {
return ( return (
<> <>
<Header theme={theme} onToggleTheme={toggleTheme} /> <Header lang={lang} theme={theme} onToggleTheme={toggleTheme} />
<main> <main>
<Outlet /> <Outlet />
</main> </main>
frontend/src/components/LanguageSwitcher.jsx
+2 -3
View File
@@ -1,8 +1,7 @@
import { Link, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
export function LanguageSwitcher() { export function LanguageSwitcher({ lang }) {
const { lang } = useParams();
const { t } = useTranslation(); const { t } = useTranslation();
const otherLang = lang === 'fr' ? 'en' : 'fr'; const otherLang = lang === 'fr' ? 'en' : 'fr';
const label = otherLang === 'en' ? t('nav.switchToEnglish') : t('nav.switchToFrench'); const label = otherLang === 'en' ? t('nav.switchToEnglish') : t('nav.switchToFrench');