Final solution in place.

Author: CRHarding

src/components/App.js

@@ -35,7 +35,7 @@ export default function App(props) {
       </nav>
       <Switch>
         <Route path={"/items-list/:itemID"}>
-          <Item />
+          <Item items={stock} />
         </Route>
         <Route path="/items-list">
           <ItemsList items={stock}/>
@@ -45,7 +45,6 @@ export default function App(props) {
         </Route>
       </Switch>
       {/* 👉 STEP 4 - Build a Switch with a Route for each of the components imported at the top */}
-
     </div>
   )
 }

src/components/Item.js

@@ -1,17 +1,31 @@
 import React from 'react'
 // We'll need quite a few imports from react-router-dom
+import { 
+  useParams, 
+  useRouteMatch, 
+  NavLink, 
+  Route, 
+  Switch 
+} 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();
+  const { url, path } = useRouteMatch();
+  console.log(url, path);
+
   // 👉 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 use this hook to grab they dynamic parts of the path (:itemID).
-  const item = {}
+  if (!items.length) return "SUCKER I WON!";
+  const item = items.find(item => item.id === parseInt(itemID));
+  // 1 === "1" => false
+  // NEVER EVER EVER EVER EVER USE DOUBLE EQUALS!
 
   return (
     <div className='item-wrapper'>
@@ -27,12 +41,22 @@ 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={`${url}/description`}>Description</NavLink>
+        <NavLink to={`${url}/shipping`}>Shipping</NavLink>
       </nav>
 
       {/* 👉 STEP 9 - Here go the Routes for `<current path>/shipping` and `<current path>/description` */}
       {/* These Routes should render <ItemDetails /> */}
 
       {/* 👉 STEP 10 - Shorten paths and urls with `useRouteMatch` hook */}
+      <Switch>
+        <Route path={`${path}/description`}>
+          <ItemDetails text={item.description} />
+        </Route>
+        <Route path={`${path}/shipping`}>
+          <ItemDetails text={item.shipping} />
+        </Route>
+      </Switch>
     </div>
   )
 }