Added routing for pet species

This commit is contained in:
Dino Tutic 2023-07-13 20:12:37 +02:00
parent 60d6d23fe4
commit 3dfaed964f
3 changed files with 23 additions and 19 deletions

View File

@ -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() {

View File

@ -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;

View File

@ -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=""
/>
}