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}
-                        name={item.name}
-                        price={item.price}
-                        status={item.status}
-                        newPrice={item.newPrice}
-                    />
+                    <Link className='item-link' to={`/morceaux/${item.id}`}>
+                        <Item key={item.id} imageUrl={item.imageUrl}
+                            name={item.name}
+                            price={item.price}
+                            status={item.status}
+                            newPrice={item.newPrice}
+                        />
+                    </Link>
+
                 )}
             </div>
             <div>