diff --git a/src/App.js b/src/App.js
index c20428f..8cf0cc3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,7 @@ const appRouter = createBrowserRouter(
}>
} />
} />
+ } />
)
);
diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
index 7817690..cf76e7c 100644
--- a/src/components/navigation/index.js
+++ b/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 = () => {
);
diff --git a/src/pages/detail/index.js b/src/pages/detail/index.js
index 10cffb6..217d6f3 100644
--- a/src/pages/detail/index.js
+++ b/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 = () => {
) : (
@@ -45,7 +46,7 @@ const PetDetailsPage = () => {
@@ -53,7 +54,7 @@ const PetDetailsPage = () => {
{data.name}
Breed: {data.breeds.primary}
-
Color: {data.colors.primary || 'Unknown'}
+
Color: {data.colors.primary || "Unknown"}
Gender: {data.gender}
Description
{data.description}