react router debut

mon-projet/src/App.jsx

@@ -1,108 +1,14 @@
 import "./App.css";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
-import Carte from "./components/Carte";
-import { useState } from "react";
-const intialData = [
-  {
-    id: 1,
-    nom: "The RGB Trilogy",
-    niveaux: "Yatagarasu - Erebus - Sonic Wave",
-  },
-  {
-    id: 2,
-    nom: "The Greek Letter Trilogy",
-    niveaux: "Omega - Sigma - Gamma",
-  },
-  {
-    id: 3,
-    nom: "The Techno Trilogy",
-    niveaux: "Artificial Ascent - Digital Descent - Cybernetic Crescent ",
-  },
-  {
-    id: 4,
-    nom: "The Riot's Trilogy",
-    niveaux: "Tartarus - Acheron - Aeternus",
-  },
-  {
-    id: 5,
-    nom: "The Apocalytic Trilogy",
-    niveaux: "Cataclysm - Bloodbath - aftermath",
-  },
-];
+import Details from "./pages/Details";
+import Accueil from "./pages/Accueil";
+import { Routes, Route } from "react-router-dom";
 
 function App() {
-  const [likes, setLikes] = useState({}); // {} au départ (pas {1:3, 4:1})
-  const [recherche, setRecherche] = useState("");
-  const [trilogies, setTrilogies] = useState(intialData);
-  const [nom, setNom] = useState("");
-  const [niveaux, setNiveaux] = useState("");
-  const [tri, setTri] = useState("nom");
-
-  const affichees = [...trilogies]
-    .filter((t) => t.nom.toLowerCase().includes(recherche.toLowerCase()))
-    .sort((a, b) => {
-      if (tri === "nom") return a.nom.localeCompare(b.nom);
-      if (tri === "likes") return (likes[b.id] || 0) - (likes[a.id] || 0);
-      return 0;
-    });
-
-  function ajouter(e) {
-    e.preventDefault(); // empêche le rechargement de page
-    if (nom.trim() === "") return; // on n'ajoute pas du vide
-    const nouvelle = { id: Date.now(), nom, niveaux }; // id unique simple
-    setTrilogies([...trilogies, nouvelle]); // 👈 NOUVEAU tableau = ancien + la nouvelle
-    setNom(""); // on vide les champs
-    setNiveaux("");
-  }
-
-  function liker(id) {
-    setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
-  }
-
-  const total = Object.values(likes).reduce((s, n) => s + n, 0);
-
   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
-        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>
+    <Routes>
+      <Route path="/" element={<Accueil />} />
+      <Route path="/trilogie/:id" element={<Details />} />
+    </Routes>
   );
 }
 

mon-projet/src/components/carte.jsx

@@ -1,4 +1,6 @@
+import { Link } from "react-router-dom";
 function Carte(props) {
+  <Link to={`/trilogie/${props.id}`}>Voir les détails</Link>;
   return (
     <div className="carte">
       <h2>{props.titre}</h2>

mon-projet/src/pages/Accueil.jsx

@@ -0,0 +1,8 @@
+import { useParams } from "react-router-dom";
+
+function Accueil() {
+  const { id } = useParams();
+  return <h1>Détails de la trilogie {id}</h1>;
+}
+
+export default Accueil;

mon-projet/src/pages/Details.jsx

@@ -0,0 +1,8 @@
+import { useParams } from "react-router-dom";
+
+function Details() {
+  const { id } = useParams();
+  return <h1>Détails de la trilogie {id}</h1>;
+}
+
+export default Details;