cliquer sur un item envoie a une page de detail avec son id

GrossesMitaines/grosses-mitaines-ui/src/components/App.js

@@ -5,6 +5,7 @@ import AboutUs from "../pages/AboutUs";
 import Privacy from "../pages/Privacy";
 import ContactUs from "../pages/ContactUs";
 import Morceaux from "../pages/Morceaux";
+import MorceauDetail from "../pages/MorceauDetail";
 
 const App = () => {
 
@@ -17,6 +18,7 @@ const App = () => {
           <Route path="aboutUs" element={<AboutUs/>} />
           <Route path="contactUs" element={<ContactUs/>}/>
           <Route path="privacy" element={<Privacy/>}/>
+          <Route path="morceaux/:id" element={<MorceauDetail/>}/>
         </Route>
       </Routes>
     </BrowserRouter>

GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js

@@ -1,5 +1,6 @@
 import { Button } from 'react-bootstrap';
 import Item from './Item';
+import { Link } from 'react-router-dom';
 
 const ItemList = ({ items }) => {
 
@@ -7,12 +8,15 @@ const ItemList = ({ items }) => {
         <>
             <div className='item-list'>
                 {items.map((item) =>
-                    <Item imageUrl={item.imageUrl}
+                    <Link className='item-link' to={`/morceaux/${item.id}`}>
-                        name={item.name}
+                        <Item key={item.id} imageUrl={item.imageUrl}
-                        price={item.price}
+                            name={item.name}
-                        status={item.status}
+                            price={item.price}
-                        newPrice={item.newPrice}
+                            status={item.status}
-                    />
+                            newPrice={item.newPrice}
+                        />
+                    </Link>
+
                 )}
             </div>
             <div>

GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import {useParams} from "react-router-dom";
+
+const MorceauDetail = () => {
+
+    const {id} = useParams();
+
+    useEffect(() => {
+        document.title = 'Morceaux';
+    });
+
+    return (
+        <>
+        <p>{id}</p>
+        </>
+    );
+}
+
+export default MorceauDetail;

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -345,6 +345,11 @@ html {
 
 }
 
+.item-link, .item-link:hover{
+    color: black;
+    text-decoration: none;
+}
+
 
 .btn-primary{
     background-color: purple;