tried t use react router but page and accueuil aren't defined

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

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);

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>,
+);