diff --git a/src/App.js b/src/App.js
index f02d895..c20428f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,12 @@ import {
// create router with JSX Route elements
const appRouter = createBrowserRouter(
- createRoutesFromElements(}>)
+ createRoutesFromElements(
+ }>
+ } />
+ } />
+
+ )
);
function App() {
diff --git a/src/components/root/index.js b/src/components/root/index.js
index 4c207a1..ce7db8e 100644
--- a/src/components/root/index.js
+++ b/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 (
- <>
-
- {/* Add an Outlet*/}
- >
- );
+ return (
+ <>
+
+
+ >
+ );
};
-export default Root;
\ No newline at end of file
+export default Root;
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
index f62e03f..fb69130 100644
--- a/src/pages/home/index.js
+++ b/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 = () => {
- {type ? `${type}s` : 'Pets'}{' '}
+ {type ? `${type}s` : "Pets"}{" "}
available for adoption near you
@@ -43,10 +44,7 @@ const HomePage = () => {
{
}