Improved navlinks

src/App.js

@@ -18,6 +18,7 @@ const appRouter = createBrowserRouter(
     <Route path="/" element={<Root />}>
       <Route index element={<HomePage />} />
       <Route path=":type" element={<HomePage />} />
+      <Route path=":type/:id" element={<PetDetailsPage />} />
     </Route>
   )
 );

src/components/navigation/index.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { getPetTypes } from '../../api/petfinder';
-import Logo from '../../assets/logo.svg';
-import Search from '../search';
+import React, { useEffect, useState } from "react";
+import { getPetTypes } from "../../api/petfinder";
+import Logo from "../../assets/logo.svg";
+import Search from "../search";
+import { NavLink } from "react-router-dom";
 
 // Import NavLink
 
@@ -24,26 +25,33 @@ const Navigation = () => {
         <Search />
       </div>
       <ul className="nav-links">
-        <li key={'all'}>
+        <li key={"all"}>
           {/* These links should be NavLink component and add a special active class name if its an active link */}
-          <a href="/"
-            className='nav-link'
+          <NavLink
+            to="/"
+            className={({ isActive }) =>
+              `nav-link ${isActive ? "nav-link-active" : ""}`
+            }
           >
             All Pets
-          </a>
+          </NavLink>
         </li>
         {petTypes
           ? petTypes.map((type) => (
               <li key={type.name}>
                 {/* These links should be NavLink component and add a special active class name if its an active link */}
-                <a href={`/${type._links.self.href.split('/').pop()}`}
+                <NavLink
+                  to={`/${type._links.self.href.split("/").pop()}`}
                   key={type.name}
-                  className='nav-link'               >
+                  className={({ isActive }) =>
+                    `nav-link ${isActive ? "nav-link-active" : ""}`
+                  }
+                >
                   {type.name}s
-                </a>{' '}
+                </NavLink>{" "}
               </li>
             ))
-          : 'Loading...'}
+          : "Loading..."}
       </ul>
     </nav>
   );

src/pages/detail/index.js

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { getPetDetails } from '../../api/petfinder';
-import Hero from '../../components/hero';
+import React, { useEffect, useState } from "react";
+import { getPetDetails } from "../../api/petfinder";
+import Hero from "../../components/hero";
+import { useParams } from "react-router-dom";
 
 // Import useParams
 // Import Navigate
@@ -9,7 +10,7 @@ const PetDetailsPage = () => {
   const [data, setData] = useState();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
-  const id = '51322435'; // <--- Update me!
+  const { id } = useParams(); // <--- Update me!
 
   useEffect(() => {
     async function getPetsData() {
@@ -37,7 +38,7 @@ const PetDetailsPage = () => {
       ) : (
         <main>
           <Hero
-            image={data.photos[1]?.full || 'https://i.imgur.com/aEcJUFK.png'}
+            image={data.photos[1]?.full || "https://i.imgur.com/aEcJUFK.png"}
             displayText={`Meet ${data.name}`}
           />
           <div className="pet-detail">
@@ -45,7 +46,7 @@ const PetDetailsPage = () => {
               <img
                 className="pet-image"
                 src={
-                  data.photos[0]?.medium || 'https://i.imgur.com/aEcJUFK.png'
+                  data.photos[0]?.medium || "https://i.imgur.com/aEcJUFK.png"
                 }
                 alt=""
               />
@@ -53,7 +54,7 @@ const PetDetailsPage = () => {
             <div>
               <h1>{data.name}</h1>
               <h3>Breed: {data.breeds.primary}</h3>
-              <p>Color: {data.colors.primary || 'Unknown'}</p>
+              <p>Color: {data.colors.primary || "Unknown"}</p>
               <p>Gender: {data.gender}</p>
               <h3>Description</h3>
               <p>{data.description}</p>