Through to Item.js Component

Author: CRHarding

src/components/App.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 // 👉 STEP 2 - React Router imports (Route, Link and Switch)
-import { Link } from "react-router-dom";
+import { Link, Route, Switch } from "react-router-dom";
 // Link aka ahref
 
 // Components used for the different routes
@@ -33,8 +33,27 @@ export default function App(props) {
           {/* 👉 STEP 3 - Make Links to navigate us Home (`/`) and Shop (`/items-list`) */}
         </div>
       </nav>
-
+      <Switch>
+        <Route path={"/items-list/:itemID"}>
+          <Item />
+        </Route>
+        <Route path="/items-list">
+          <ItemsList items={stock}/>
+        </Route>
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
       {/* 👉 STEP 4 - Build a Switch with a Route for each of the components imported at the top */}
+
     </div>
   )
 }
+
+/**
+ * switch (varName) {
+ *   case: "blah":
+ *      doSomething();
+ *      break;
+ * }
+ */

src/components/Home.js

@@ -1,12 +1,14 @@
 import React from 'react'
 // We'll need React Router's own version of the History API
+import { useHistory } from "react-router-dom";
 
 export default function Home() {
   // 👉 STEP 5 - Build a click handler that will imperatively
   // navigate us to <website base URL>/items-list
+  const history = useHistory();
 
   const routeToShop = () => {
-
+    history.push("/items-list");
   }
 
   return (

src/components/ItemsList.js

@@ -1,10 +1,12 @@
 import React from 'react'
 // We'll need a Link and the useRouteMatch hook from 'react-router-dom'
+import { Link, useRouteMatch } from "react-router-dom";
 
 export default function ItemsList(props) {
   const { items } = props
 
   // We'll grab the current URL using the hook
+  const { url } = useRouteMatch();
 
   return (
     <div className='items-list-wrapper'>
@@ -14,14 +16,15 @@ export default function ItemsList(props) {
           key={item.id}
         >
           {/* 👉 STEP 6 - Link starts, navigates us from <current url> to <current url>/<id of the item> */}
-          <img
-            className='items-list-image'
-            src={item.imageUrl}
-            alt={item.name}
-          />
-          <p>{item.name}</p>
+          <Link to={`${url}/${item.id}`}>
+            <img
+              className='items-list-image'
+              src={item.imageUrl}
+              alt={item.name}
+            />
+            <p>{item.name}</p>
           {/* Link ends */}
-
+          </Link>
           <p>${item.price}</p>
         </div>
       ))}