correction bugs

mon-projet/src/components/carte.jsx

@@ -1,8 +1,8 @@
 import { Link } from "react-router-dom";
 function Carte(props) {
-  <Link to={`/trilogie/${props.id}`}>Voir les détails</Link>;
   return (
     <div className="carte">
+      <Link to={`/trilogie/${props.id}`}>Voir les détails</Link>
       <h2>{props.titre}</h2>
       <p>{props.niveaux}</p>
       <button onClick={props.onLike}>❤️ {props.likes}</button>

mon-projet/src/pages/Accueil.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import Carte from "../components/carte";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
+import { useParams } from "react-router-dom";
 const initialData = [
   {
     id: 1,
@@ -61,47 +62,48 @@ function Accueil() {
   }
 
   const total = Object.values(likes).reduce((s, n) => s + n, 0);
-
-  <div className="body">
-    <Header />
-    <>
-      <select value={tri} onChange={(e) => setTri(e.target.value)}>
-        <option value="nom">Nom (A→Z)</option>
-        <option value="likes">Plus likées</option>
-      </select>
-    </>
-    <form onSubmit={ajouter}>
+  return (
+    <div className="body">
+      <Header />
+      <>
+        <select value={tri} onChange={(e) => setTri(e.target.value)}>
+          <option value="nom">Nom (A→Z)</option>
+          <option value="likes">Plus likées</option>
+        </select>
+      </>
+      <form onSubmit={ajouter}>
+        <input
+          value={nom}
+          onChange={(e) => setNom(e.target.value)}
+          placeholder="Nom de la trilogie"
+        />
+        <input
+          value={niveaux}
+          onChange={(e) => setNiveaux(e.target.value)}
+          placeholder="Niveaux"
+        />
+        <button type="submit">Ajouter</button>
+      </form>
       <input
-        value={nom}
-        onChange={(e) => setNom(e.target.value)}
-        placeholder="Nom de la trilogie"
+        type="search"
+        placeholder="Rechercher une trilogie…"
+        value={recherche}
+        onChange={(e) => setRecherche(e.target.value)}
       />
-      <input
-        value={niveaux}
-        onChange={(e) => setNiveaux(e.target.value)}
-        placeholder="Niveaux"
-      />
-      <button type="submit">Ajouter</button>
-    </form>
-    <input
-      type="search"
-      placeholder="Rechercher une trilogie…"
-      value={recherche}
-      onChange={(e) => setRecherche(e.target.value)}
-    />
-    <p>👍 Total de likes : {total}</p>
-    {affichees.length === 0 && <p>Aucune trilogie trouvée</p>}
-    {affichees.map((trilo) => (
-      <Carte
-        key={trilo.id}
-        titre={trilo.nom}
-        niveaux={trilo.niveaux}
-        likes={likes[trilo.id] || 0}
-        onLike={() => liker(trilo.id)}
-      />
-    ))}
-    <Footer />
-  </div>;
+      <p>👍 Total de likes : {total}</p>
+      {affichees.length === 0 && <p>Aucune trilogie trouvée</p>}
+      {affichees.map((trilo) => (
+        <Carte
+          key={trilo.id}
+          titre={trilo.nom}
+          niveaux={trilo.niveaux}
+          likes={likes[trilo.id] || 0}
+          onLike={() => liker(trilo.id)}
+        />
+      ))}
+      <Footer />
+    </div>
+  );
 }
 
 export default Accueil;

mon-projet/src/pages/Details.jsx

@@ -1,8 +1,9 @@
 import { useParams } from "react-router-dom";
 
 function Details() {
-  const { id } = useParams();
-  return <h1>Détails de la trilogie {id}</h1>;
+  const { id } = useParams(); // récupère le :id de l'URL
+  <p>toto</p>;
+  return <h1>Détails de la trilogie {}</h1>;
 }
 
 export default Details;