project finished

Author: SylvaDev

src/components/App.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 // 👉 STEP 2 - React Router imports (Routes, Route and Link)
+import { Routes, Route, Link } from 'react-router-dom'
 
 // Components used for the different routes
 import Home from './Home'
@@ -27,14 +28,20 @@ export default function App(props) {
         <h1 className='store-header'>Emily&apos;s Trinkets</h1>
         <div className='nav-links'>
           {/* 👉 STEP 3 - Make Links to navigate us Home (`/`) and Shop (`items-list`) */}
+          <Link to='/'>Home</Link>
+          <Link to='items-list'>Shop</Link>
         </div>
       </nav>
 
       {/* 👉 STEP 4 - Build Routes, and a Route for each of the components imported at the top */}
       {/* Note that the components will need some props in order to work */}
       {/* Note that the path that renders Item has a URL parameter */}
       {/* Note that the path that renders Item must support nested routes */}
-
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='items-list' element={<ItemsList items={stock}/>} />
+        <Route path='items-list/:itemID/*' element={<Item items={stock}/>} />
+      </Routes>
     </div>
   )
 }

src/components/Home.js

@@ -1,10 +1,11 @@
 // We'll need React Router's hook to navigate around
+import { useNavigate } from "react-router-dom"
 
 export default function Home() {
-
+const navigate = useNavigate()
   // 👉 STEP 5 - Build a click handler that will imperatively navigate us to /items-list
   const routeToShop = () => {
-
+    navigate('items-list')
   }
 
   return (

src/components/Item.js

@@ -1,18 +1,20 @@
 import React from 'react'
 // We'll need quite a few imports from react-router-dom
-
+import { useParams, NavLink, Routes, Route } from 'react-router-dom'
 import ItemDetails from './ItemDetails'
 
 export default function Item(props) {
   // We get ALL items through props. We'll use the URL to find out which item is the one to show.
   const { items } = props
-
+  const { itemID } = useParams()
   // 👉 STEP 7 - We need to pull item from items, using a parameter in the URL (:itemID)
   // Beware! The ids are integers, whereas URL parameters are strings.
   // Beware! The JSX is expecting 'item' to exist instantly!
   // we need useParams to grab the dynamic parts of the path (:itemID).
+  
 
-  const item = {}
+
+  const item =items.find(it => it.id == itemID)
 
   // This guards against a crash (the data is not available instantaneously)
   if (!items.length) return 'Getting your item...'
@@ -31,12 +33,17 @@ export default function Item(props) {
 
       <nav className='item-sub-nav'>
         {/* 👉 STEP 8 - Here go the NavLinks to `<current url>/shipping` and `<current url>/description` */}
+         <NavLink to='description'>Description</NavLink>
+         <NavLink to='shipping'>Shipping</NavLink>
 
       </nav>
 
       {/* 👉 STEP 9 - Here go the Routes for `<current path>/shipping` and `<current path>/description` */}
       {/* These Routes should render <ItemDetails />  */}
-
+      <Routes>
+        <Route path='shipping' element={<ItemDetails text='shipping' />} />
+        <Route path='description' element={<ItemDetails text='description' />} />
+      </Routes>
     </div>
   )
 }

src/components/ItemsList.js

@@ -1,5 +1,6 @@
 import React from 'react'
 // We'll need a Link from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 export default function ItemsList(props) {
   const { items } = props
@@ -12,6 +13,7 @@ export default function ItemsList(props) {
           key={item.id}
         >
           {/* 👉 STEP 6 - Link starts, navigates us from <current url> to <current url>/<id of the item> */}
+        <Link to={`${item.id}`}>
           <>
             <img
               className='items-list-image'
@@ -21,7 +23,7 @@ export default function ItemsList(props) {
             <p>{item.name}</p>
           </>
           {/* Link ends */}
-
+          </Link>
           <p>${item.price}</p>
         </div>
       ))}

src/index.js

@@ -8,9 +8,12 @@ import App from './components/App'
 import './styles.css'
 
 // 👉 STEP 1 - Import Router and wrap the app
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
+    <BrowserRouter>
     <App />
+    </BrowserRouter>
 );