Correction contact: relier les pages a App (importer Accueil/Detail, App=Header+Routes+Footer, supprimer le contenu inline en double) + nettoyage Accueil (Detail en double, console:plateforme)

2026-06-25 15:52:23 +02:00
parent e0fd5872cb
commit ef268afd15
1 changed files with 74 additions and 0 deletions
@@ -0,0 +1,74 @@
+# 🔧 Correction — relier tes pages à `App` (et virer le doublon)
+
+Bonne nouvelle : tes pages `pages/Accueil.jsx` et `pages/Detail.jsx` sont **bien faites** 👏 (tout ton contenu est dans `Accueil`). Le souci est uniquement dans **`App.jsx`** : tu n'as pas **branché** ces pages, et tu as gardé **tout l'ancien contenu en double** dedans.
+
+---
+
+## 🔍 Les 2 problèmes dans `App.jsx`
+
+1. Tu utilises `<Accueil />` dans une `<Route>`, mais tu **ne l'importes pas** → `Accueil is not defined`.
+2. Tu as **recopié** toute la liste/recherche/formulaire **dans `App`** (en plus de l'avoir dans `pages/Accueil.jsx`). Du coup ce contenu s'affiche **hors des routes**, et tes pages ne servent à rien.
+
+> 🧠 **L'idée du routeur :** `App` ne doit **plus** contenir le contenu des pages. Son rôle : **assembler** (Header/Footer) et **router** (« telle URL → telle page »). Le contenu vit **dans les pages** (`Accueil`, `Detail`).
+
+---
+
+## ✅ La correction : remplace TOUT ton `App.jsx` par ça
+
+```jsx
+import { Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Accueil from "./pages/Accueil";   // 👈 on IMPORTE la page
+import Detail from "./pages/Detail";      // 👈 et celle-ci aussi
+import "./App.css";
+
+function App() {
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route path="/" element={<Accueil />} />
+        <Route path="/jeu/:id" element={<Detail />} />
+      </Routes>
+      <Footer />
+    </>
+  );
+}
+
+export default App;
+```
+
+C'est **tout** : plus aucun `useState`, plus de `fetch`, plus de formulaire dans `App`. Tout ça vit déjà dans `pages/Accueil.jsx`.
+
+> 🔎 `Header` et `Footer` sont **autour** des `<Routes>` → ils s'affichent sur **toutes** les pages. Seul ce qui est **dans** `<Routes>` change selon l'URL.
+
+**✅ Test :** va sur `/` → ta page d'accueil (la liste qu'il y avait avant) **s'affiche**. Va sur `/jeu/2` → la page Détail.
+
+---
+
+## 🧹 Deux petits restes à nettoyer dans `pages/Accueil.jsx`
+
+1. Tu as une **fonction `Detail` en double**, coincée **dans** `Accueil` :
+```jsx
+function Detail() {
+  const { id } = useParams();   // ❌ useParams n'est même pas importé ici
+  return <h1>Détails du jeu {id}</h1>;
+}
+```
+Elle ne sert à rien (le vrai `Detail` est dans `pages/Detail.jsx`) → **supprime-la** de `Accueil`.
+
+2. Dans ton objet `nouveau`, il reste `console,` (l'ancien nom). Tu as renommé l'état en `plateforme`, donc écris :
+```jsx
+const nouveau = { id: Date.now(), titre, annee: Number(annee), console: plateforme, Type: "3d" };
+```
+(sinon tu ranges l'objet global `console`, pas la plateforme tapée.)
+
+---
+
+## ✅ Récap
+- [ ] Remplacer `App.jsx` par la version courte (importe `Accueil` + `Detail`, `Header` + `<Routes>` + `Footer`)
+- [ ] Supprimer tout l'ancien contenu inline dans `App`
+- [ ] Dans `Accueil.jsx` : supprimer la fonction `Detail` en double + écrire `console: plateforme`
+
+> 💬 La phrase à garder : **`App` assemble et route ; les pages contiennent le contenu.** Un composant qu'on affiche (`<Accueil/>`) doit être **importé**.