diff --git a/CORRECTION_router.md b/CORRECTION_router.md new file mode 100644 index 0000000..8af3589 --- /dev/null +++ b/CORRECTION_router.md @@ -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 `` dans une ``, 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( + + + , +); +createRoot(document.getElementById("root")).render( // ❌ un 2e render dans le même #root + + + , +); +``` + +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( + + + + + , +); +``` + +> 🧠 **Règle :** un seul point d'entrée → un seul `render`. Et `` doit **envelopper** ce qui contient tes ``. + +--- + +## 🐛 Bug 2 — `` n'existe pas (l'erreur principale) + +Dans ton `App.jsx` : +```jsx + + } /> {/* ❌ Accueil n'est défini nulle part */} + } /> + +``` +Tu demandes à afficher ``, mais tu ne l'as **ni créé ni importé** → `Accueil is not defined`. + +Autre souci : tu as mis ton `` **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 ( + <> + 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

Détails du jeu {id}

; +} + +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 ( + <> +
+ + } /> + } /> + +