Added routing for pet species

src/App.js

@@ -14,7 +14,12 @@ 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>
+  )
 );
 
 function App() {

src/components/root/index.js

@@ -1,14 +1,15 @@
-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 />
-            {/* Add an Outlet*/}
+      <Outlet />
-        </>
+    </>
-    );
+  );
 };
 
-export default Root;
+export default Root;

src/pages/home/index.js

@@ -1,13 +1,14 @@
-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 = ''; // 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={
+                      src={animal.photos[0]?.medium || "/missing-animal.png"}
-                        animal.photos[0]?.medium ||
-                        '/missing-animal.png'
-                      }
                       alt=""
                     />
                   }