Adopt a pet project

Hi all,

I’m working on the Adopt a pet project and I’m stuck right at step 5. The project is essentially about using react router, and after wrapping my HomePage component in a router and using param URL, no matter where I navigate on the page, nothing renders and I get that message No routes matched location "/<whatever>".

This is my App.js:

import HomePage from './pages/home';
import SearchPage from './pages/search';
import PetDetailsPage from './pages/detail';
import PetDetailsNotFound from './pages/petDetailsNotFound';
import Navigation from './components/navigation';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
            <Navigation />
        <Routes>
            <Route path='/:type?' component={HomePage} />
      {/*<HomePage />*/}
        </Routes>
    </Router>
  );
}

export default App;

and this is my index.js in pages/home/

import React, { useEffect, useState } from 'react';
import { getPets } from '../../api/petfinder';
import Hero from '../../components/hero';
import Pet from '../../components/pet';
import {useParams, Link} from 'react-router-dom';

const HomePage = () => {
  const [data, setData] = useState(null);
    const {type} = useParams();
    console.log(type);

  useEffect(() => {
    async function getPetsData() {
      const petsData = await getPets(type);
      setData(petsData);
    }

    getPetsData();
  }, [type]);

  if (!data) {
    return <h2>Loading...</h2>;
  }

  return (
    <div className="page">
      <Hero />
      <h3>
        <span className="pet-type-label">{type ? `${type}s` : 'Pets'}</span>{' '}
        available for adoption near you
      </h3>

      {data.length ? (
        <div className="grid">
          {data.map((animal) => (
            <Link // Change me to a Link!
              key={animal.id}
              to={`/${animal.type.toLowerCase()}/${animal.id}`}
              className="pet"
            >
              <article>
                <div className="pet-image-container">
                  {
                    <img
                      className="pet-image"
                      src={
                        animal.photos[0]?.medium ||
                        '/missing-animal.png'
                      }
                      alt=""
                    />
                  }
                </div>
                <h3>{animal.name}</h3>
                <p>Breed: {animal.breeds.primary}</p>
                <p>Color: {animal.colors.primary}</p>
                <p>Gender: {animal.gender}</p>
              </article>
            </Link> // Don't forget to change me!
          ))}
        </div>
      ) : (
        <p className="prompt">No {type}s available for adoption now.</p>
      )}
    </div>
  );
};

export default HomePage;

The project is pre-built, and these are the only two files I have modified.

Do you need the <Routes /> ? Does it work without it?

Have you checked out the dedicated page for this project, where you can compare other people’s project code? Adopt a Pet! Off-Platform Practice Project

Hi @lucitemple , thanks for your reply. The issues was with my version of react-router-dom, it’s all sorted now!