Added pet-not-found

src/App.js

@@ -20,6 +20,7 @@ const appRouter = createBrowserRouter(
       <Route path=":type" element={<HomePage />} />
       <Route path=":type/:id" element={<PetDetailsPage />} />
       <Route path="search" element={<SearchPage />} />
+      <Route path="pet-details-not-found" element={<PetDetailsNotFound />} />
     </Route>
   )
 );

src/components/search/index.js

@@ -20,6 +20,8 @@ const Search = () => {
     const query = createSearchParams(searchQuery);
 
     // imperatively redirect with useNavigate() returned function
+
+    //Dont really understand why I am passing an object to useNavigate
     navigate({ pathname: "/search", search: `${query}` });
   };
 

src/pages/detail/index.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { getPetDetails } from "../../api/petfinder";
 import Hero from "../../components/hero";
 import { useParams } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 // Import useParams
 // Import Navigate
@@ -33,7 +34,7 @@ const PetDetailsPage = () => {
         <h3>Loading...</h3>
       ) : error ? (
         <div>
-          {/* Redirect to /pet-details-not-found if there was an error! */}
+          <Navigate to="/pet-details-not-found" />
         </div>
       ) : (
         <main>

src/pages/petDetailsNotFound/index.js

@@ -1,19 +1,21 @@
-import React from 'react';
-// import useNavigate here.
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
 const PetDetailsNotFound = () => {
-
   // get the navigate function from useNavigate
-  const navigate = "REPLACE ME";
+  const navigate = useNavigate();
 
   const goHome = () => {
-    // Go home!
-  }
+    navigate("/");
+  };
 
   return (
     <main className="page">
       <h3>404: Who let the dogs out?</h3>
-      <p>Sorry, but the details for this pet have not been uploaded by the shelter yet. Check back later!</p>
+      <p>
+        Sorry, but the details for this pet have not been uploaded by the
+        shelter yet. Check back later!
+      </p>
       <img
         src="https://i.chzbgr.com/full/8362031616/h9EB970C5/weve-lost-our-corgination"
         alt=""