Correction contact router: un seul render (StrictMode>BrowserRouter>App), creer pages Accueil/Detail (Accueil is not defined), App=Header+Routes+Footer, fix console:plateforme

2026-06-25 14:51:41 +02:00
parent e38b05b5a5
commit 1981386cb7
1 changed files with 145 additions and 0 deletions
@@ -0,0 +1,145 @@
+# 🔧 Correction — React Router : « Accueil is not defined » + 2 bugs
+
+Ton erreur dit l'essentiel : **`Accueil` n'est pas défini**. Tu utilises `<Accueil />` dans une `<Route>`, mais ce composant **n'existe nulle part**. On répare ça, plus un double `render` dans `main.jsx`.
+
+---
+
+## 🐛 Bug 1 — `main.jsx` rend l'app **deux fois**
+
+```jsx
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+createRoot(document.getElementById("root")).render(   // ❌ un 2e render dans le même #root
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);
+```
+
+Il ne doit y avoir **qu'un seul** `createRoot(...).render(...)`. Là, le second écrase le premier. On **fusionne** en emboîtant `StrictMode > BrowserRouter > App` :
+
+```jsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);
+```
+
+> 🧠 **Règle :** un seul point d'entrée → un seul `render`. Et `<BrowserRouter>` doit **envelopper** ce qui contient tes `<Routes>`.
+
+---
+
+## 🐛 Bug 2 — `<Accueil />` n'existe pas (l'erreur principale)
+
+Dans ton `App.jsx` :
+```jsx
+<Routes>
+  <Route path="/" element={<Accueil />} />        {/* ❌ Accueil n'est défini nulle part */}
+  <Route path="/jeu/:id" element={<Detail />} />
+</Routes>
+```
+Tu demandes à afficher `<Accueil />`, mais tu ne l'as **ni créé ni importé** → `Accueil is not defined`.
+
+Autre souci : tu as mis ton `<Routes>` **au-dessus** de tout ton contenu (Header, recherche, liste, formulaire…), et ce contenu est **en dehors** des routes. Du coup il s'afficherait sur **toutes** les pages, et la route `/` n'a rien à montrer (à part `Accueil`, qui n'existe pas).
+
+### ✅ L'idée : ta liste actuelle **devient** la page `Accueil`
+
+Tu as déjà tout le code de la page d'accueil (recherche + tri + liste + formulaire + total). Il faut juste le **mettre dans un composant `Accueil`**, et laisser `App` ne gérer **que** les routes.
+
+**1. Crée `src/pages/Accueil.jsx`** et **déplaces-y** tout ce contenu (avec ses `useState`, le `fetch`, `ajouter`, `affiches`, etc.) :
+```jsx
+import { useState, useEffect } from "react";
+import Carte from "../components/Carte";
+import BarreRecherche from "../components/BarreRecherche";
+
+function Accueil() {
+  // ⬅️ tout ton code actuel de App (les useState, le fetch, ajouter, affiches…)
+  return (
+    <>
+      <BarreRecherche valeur={recherche} onChange={(e) => setRecherche(e.target.value)} />
+      {/* le select de tri, la liste affiches.map(...), le formulaire, le total… */}
+    </>
+  );
+}
+
+export default Accueil;
+```
+
+**2. Crée `src/pages/Detail.jsx`** (sors ta fonction `Detail` de `App`) :
+```jsx
+import { useParams } from "react-router-dom";
+
+function Detail() {
+  const { id } = useParams();
+  return <h1>Détails du jeu {id}</h1>;
+}
+
+export default Detail;
+```
+
+**3. `App.jsx` ne garde QUE l'assemblage + les routes :**
+```jsx
+import { Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Accueil from "./pages/Accueil";
+import Detail from "./pages/Detail";
+import "./App.css";
+
+function App() {
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route path="/" element={<Accueil />} />
+        <Route path="/jeu/:id" element={<Detail />} />
+      </Routes>
+      <Footer />
+    </>
+  );
+}
+
+export default App;
+```
+> 🔎 `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 :** `/` affiche ta liste (page Accueil), `/jeu/2` affiche la page Détail. Plus d'erreur « Accueil is not defined ».
+
+---
+
+## 🐛 Bug 3 — petit reste du renommage `console`
+
+Dans ton `ajouter`, tu as renommé l'état en `plateforme` 👍, mais l'objet écrit encore :
+```jsx
+const nouveau = { id: Date.now(), titre, annee: Number(annee), console, Type: "3d" };
+//                                                              ^^^^^^^ = l'objet global console !
+```
+`console,` (tout seul) veut dire `console: console` → tu ranges l'**objet global `console`** dans ton jeu, pas la plateforme tapée. Corrige :
+```jsx
+const nouveau = { id: Date.now(), titre, annee: Number(annee), console: plateforme, Type: "3d" };
+```
+
+---
+
+## ✅ Récap
+- [ ] `main.jsx` : un **seul** `render`, `StrictMode > BrowserRouter > App`
+- [ ] Créer `pages/Accueil.jsx` (y déplacer ta liste/recherche/tri/formulaire + leur état)
+- [ ] Créer `pages/Detail.jsx` (sortir la fonction `Detail`)
+- [ ] `App.jsx` = `Header` + `<Routes>` + `Footer`, rien d'autre
+- [ ] `console: plateforme` dans l'objet `nouveau`
+
+> 💡 Pour naviguer vers le détail, mets un `<Link to={`/jeu/${jeu.id}`}>` (dans la `Carte` ou la liste) — pas un `<a href>`.
+
+> 💬 À garder : un composant qu'on utilise (`<Accueil/>`) doit **exister et être importé** ; `App` **assemble et route**, les **pages** contiennent le contenu.