Trying to add search function / useNavigate question

src/App.js

@@ -14,7 +14,13 @@ import {
 
 // create router with JSX Route elements
 const appRouter = createBrowserRouter(
-  createRoutesFromElements(<Route path="/" element={<Root />}></Route>)
+  createRoutesFromElements(
+    <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,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/components/root/index.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import Navigation from '../navigation';
+import React from "react";
+import Navigation from "../navigation";
+import { Outlet } from "react-router-dom";
 // import Outlet
 
 const Root = () => {
-    return (
-        <>
-            <Navigation/>
-            {/* Add an Outlet*/}
-        </>
-    );
+  return (
+    <>
+      <Navigation />
+      <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 = "REPLACE ME";
+  const navigate = useNavigate();
 
   const searchInputRef = useRef();
 
@@ -13,13 +13,14 @@ const Search = () => {
     e.preventDefault();
 
     const searchQuery = {
-      name: searchInputRef.current.value
-    }
+      name: searchInputRef.current.value,
+    };
 
-    // use createSearchParams 
-    const query = "REPLACE ME";
+    // use createSearchParams
+    const query = createSearchParams(searchQuery);
 
     // imperatively redirect with useNavigate() returned function
+    navigate({ pathname: "/search", search: `${query}` });
   };
 
   return (

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>

src/pages/home/index.js

@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { getPets } from '../../api/petfinder';
-import Hero from '../../components/hero';
+import React, { useEffect, useState } from "react";
+import { getPets } from "../../api/petfinder";
+import Hero from "../../components/hero";
+import { useParams } from "react-router-dom";
 
 // import useParams
 // import Link
 
 const HomePage = () => {
   const [data, setData] = useState(null);
-  const type = ''; // Fix me!
+  const { type } = useParams(); // Fix me!
 
   useEffect(() => {
     async function getPetsData() {
@@ -26,7 +27,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>
 
@@ -43,10 +44,7 @@ const HomePage = () => {
                   {
                     <img
                       className="pet-image"
-                      src={
-                        animal.photos[0]?.medium ||
-                        '/missing-animal.png'
-                      }
+                      src={animal.photos[0]?.medium || "/missing-animal.png"}
                       alt=""
                     />
                   }