From 6fc3386965ab42f5e454f6c920af70a4e3f5b1ef Mon Sep 17 00:00:00 2001
From: Anthony GAEREMYNCK <1@anthony.sh>
Date: Sun, 2 Aug 2026 10:58:23 +0200
Subject: [PATCH] fix(seo): pass lang as a prop to Header/LanguageSwitcher
 instead of useParams

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').
---
 frontend/src/components/Header.jsx           | 7 +++----
 frontend/src/components/LangLayout.jsx       | 2 +-
 frontend/src/components/LanguageSwitcher.jsx | 5 ++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 1bb2d68..9272be8 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -1,10 +1,9 @@
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { LanguageSwitcher } from './LanguageSwitcher.jsx';
 import { ThemeToggle } from './ThemeToggle.jsx';
 
-export function Header({ theme, onToggleTheme }) {
-  const { lang } = useParams();
+export function Header({ lang, theme, onToggleTheme }) {
   const { t } = useTranslation();
 
   return (
@@ -13,7 +12,7 @@ export function Header({ theme, onToggleTheme }) {
         {t('brand')}
       </Link>
       <div className="site-header-controls">
-        <LanguageSwitcher />
+        <LanguageSwitcher lang={lang} />
         <ThemeToggle
           theme={theme}
           onToggle={onToggleTheme}
diff --git a/frontend/src/components/LangLayout.jsx b/frontend/src/components/LangLayout.jsx
index 4883653..071ba67 100644
--- a/frontend/src/components/LangLayout.jsx
+++ b/frontend/src/components/LangLayout.jsx
@@ -17,7 +17,7 @@ export function LangLayout({ lang }) {
 
   return (
     <>
-      <Header theme={theme} onToggleTheme={toggleTheme} />
+      <Header lang={lang} theme={theme} onToggleTheme={toggleTheme} />
       <main>
         <Outlet />
       </main>
diff --git a/frontend/src/components/LanguageSwitcher.jsx b/frontend/src/components/LanguageSwitcher.jsx
index f823d2f..29ec2f2 100644
--- a/frontend/src/components/LanguageSwitcher.jsx
+++ b/frontend/src/components/LanguageSwitcher.jsx
@@ -1,8 +1,7 @@
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-export function LanguageSwitcher() {
-  const { lang } = useParams();
+export function LanguageSwitcher({ lang }) {
   const { t } = useTranslation();
   const otherLang = lang === 'fr' ? 'en' : 'fr';
   const label = otherLang === 'en' ? t('nav.switchToEnglish') : t('nav.switchToFrench');