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 (
            <Navigation />
            <Route path='/:type?' component={HomePage} />
      {/*<HomePage />*/}

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();

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

  }, [type]);

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

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

      {data.length ? (
        <div className="grid">
          { => (
            <Link // Change me to a Link!
                <div className="pet-image-container">
              [0]?.medium ||
                <p>Breed: {animal.breeds.primary}</p>
                <p>Color: {animal.colors.primary}</p>
                <p>Gender: {animal.gender}</p>
            </Link> // Don't forget to change me!
      ) : (
        <p className="prompt">No {type}s available for adoption now.</p>

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!