src/App.js

@@ -14,13 +14,7 @@ import {
 
 // create router with JSX Route elements
 const appRouter = createBrowserRouter(
-  createRoutesFromElements(
+  createRoutesFromElements(<Route path="/" element={<Root />}></Route>)
-    <Route path="/" element={<Root />}>
-      <Route index element={<HomePage />} />
-      <Route path=":type" element={<HomePage />} />
-      <Route path=":type/:id" element={<PetDetailsPage />} />
-    </Route>
-  )
 );
 
 function App() {

src/components/navigation/index.js

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
-import { getPetTypes } from "../../api/petfinder";
+import { getPetTypes } from '../../api/petfinder';
-import Logo from "../../assets/logo.svg";
+import Logo from '../../assets/logo.svg';
-import Search from "../search";
+import Search from '../search';
-import { NavLink } from "react-router-dom";
 
 // Import NavLink
 
@@ -25,33 +24,26 @@ 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 */}
-          <NavLink
+          <a href="/"
-            to="/"
+            className='nav-link'
-            className={({ isActive }) =>
-              `nav-link ${isActive ? "nav-link-active" : ""}`
-            }
           >
             All Pets
-          </NavLink>
+          </a>
         </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 */}
-                <NavLink
+                <a href={`/${type._links.self.href.split('/').pop()}`}
-                  to={`/${type._links.self.href.split("/").pop()}`}
                   key={type.name}
-                  className={({ isActive }) =>
+                  className='nav-link'               >
-                    `nav-link ${isActive ? "nav-link-active" : ""}`
-                  }
-                >
                   {type.name}s
-                </NavLink>{" "}
+                </a>{' '}
               </li>
             ))
-          : "Loading..."}
+          : 'Loading...'}
       </ul>
     </nav>
   );

src/components/root/index.js

@@ -1,15 +1,14 @@
-import React from "react";
+import React from 'react';
-import Navigation from "../navigation";
+import Navigation from '../navigation';
-import { Outlet } from "react-router-dom";
 // import Outlet
 
 const Root = () => {
-  return (
+    return (
-    <>
+        <>
-      <Navigation />
+            <Navigation/>
-      <Outlet />
+            {/* Add an Outlet*/}
-    </>
+        </>
-  );
+    );
 };
 
-export default Root;
+export default Root;

src/components/search/index.js

@@ -1,11 +1,11 @@
-import React, { useRef } from "react";
+import React, { useRef } from 'react';
-import { createSearchParams, useNavigate } from "react-router-dom";
 // Import createSearchParams
 // Import useNavigate
 
 const Search = () => {
+
   // get navigate function
-  const navigate = useNavigate();
+  const navigate = "REPLACE ME";
 
   const searchInputRef = useRef();
 
@@ -13,14 +13,13 @@ const Search = () => {
     e.preventDefault();
 
     const searchQuery = {
-      name: searchInputRef.current.value,
+      name: searchInputRef.current.value
-    };
+    }
 
-    // use createSearchParams
+    // use createSearchParams 
-    const query = createSearchParams(searchQuery);
+    const query = "REPLACE ME";
 
     // imperatively redirect with useNavigate() returned function
-    navigate({ pathname: "/search", search: `${query}` });
   };
 
   return (

src/pages/detail/index.js

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
-import { getPetDetails } from "../../api/petfinder";
+import { getPetDetails } from '../../api/petfinder';
-import Hero from "../../components/hero";
+import Hero from '../../components/hero';
-import { useParams } from "react-router-dom";
 
 // Import useParams
 // Import Navigate
@@ -10,7 +9,7 @@ const PetDetailsPage = () => {
   const [data, setData] = useState();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
-  const { id } = useParams(); // <--- Update me!
+  const id = '51322435'; // <--- Update me!
 
   useEffect(() => {
     async function getPetsData() {
@@ -38,7 +37,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">
@@ -46,7 +45,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=""
               />
@@ -54,7 +53,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>

src/pages/home/index.js

@@ -1,14 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
-import { getPets } from "../../api/petfinder";
+import { getPets } from '../../api/petfinder';
-import Hero from "../../components/hero";
+import Hero from '../../components/hero';
-import { useParams } from "react-router-dom";
 
 // import useParams
 // import Link
 
 const HomePage = () => {
   const [data, setData] = useState(null);
-  const { type } = useParams(); // Fix me!
+  const type = ''; // Fix me!
 
   useEffect(() => {
     async function getPetsData() {
@@ -27,7 +26,7 @@ const HomePage = () => {
     <div className="page">
       <Hero />
       <h3>
-        <span className="pet-type-label">{type ? `${type}s` : "Pets"}</span>{" "}
+        <span className="pet-type-label">{type ? `${type}s` : 'Pets'}</span>{' '}
         available for adoption near you
       </h3>
 
@@ -44,7 +43,10 @@ const HomePage = () => {
                   {
                     <img
                       className="pet-image"
-                      src={animal.photos[0]?.medium || "/missing-animal.png"}
+                      src={
+                        animal.photos[0]?.medium ||
+                        '/missing-animal.png'
+                      }
                       alt=""
                     />
                   }