From e38b05b5a568a254deb4433294794ed188c542b0 Mon Sep 17 00:00:00 2001
From: Melissa <stage2@echoes.solutions>
Date: Thu, 25 Jun 2026 14:46:54 +0200
Subject: [PATCH] tried t use react router but page and accueuil aren't defined

---
 react-project/src/App.jsx              | 12 ++++++++++++
 react-project/src/components/Carte.jsx |  2 ++
 react-project/src/main.jsx             | 18 ++++++++++++------
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/react-project/src/App.jsx b/react-project/src/App.jsx
index d12efe4..fbc9043 100644
--- a/react-project/src/App.jsx
+++ b/react-project/src/App.jsx
@@ -3,6 +3,8 @@ import Footer from "./components/Footer";
 import Carte from "./components/Carte";
 import BarreRecherche from "./components/BarreRecherche";
 import { useState, useEffect } from "react";
+import { Routes, Route } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import "./App.css";
 
 function App() {
@@ -51,8 +53,18 @@ function App() {
 
   if (chargement) return <p>Chargement…</p>;
 
+  function Detail() {
+    const { id } = useParams();
+    return <h1>Détails du jeu {id}</h1>;
+  }
+
   return (
     <>
+      <Routes>
+        <Route path="/" element={<Accueil />} />
+        <Route path="/jeu/:id" element={<Detail />} />
+      </Routes>
+
       <Header />
 
       <BarreRecherche
diff --git a/react-project/src/components/Carte.jsx b/react-project/src/components/Carte.jsx
index c3b6105..a3b8a99 100644
--- a/react-project/src/components/Carte.jsx
+++ b/react-project/src/components/Carte.jsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import Badge from "./Badge";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 
 function Carte(props) {
   console.log(props.gameId);
@@ -17,6 +18,7 @@ function Carte(props) {
       <p>
         {props.console} - {props.annee} - <Badge Type={props.Type} />
       </p>
+      <Link to={`/jeu/${props.gameId}`}>Voir les détails</Link>
       <button
         onClick={() => {
           setLikes(likes + 1);
diff --git a/react-project/src/main.jsx b/react-project/src/main.jsx
index b9a1a6d..3be72d7 100644
--- a/react-project/src/main.jsx
+++ b/react-project/src/main.jsx
@@ -1,10 +1,16 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './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(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);
+createRoot(document.getElementById("root")).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);