So im just stuk at the task 22 of the React Router project Adopt a pet.
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-react-part-ii/modules/wdcp-22-react-router/projects/pet-adoption-website
After this step is supposed to render the search results of the searchbar if it matches one of the options, but it doesn’t, i followed the steps and i even consult a solution code on github, i have exactly the same and still doesn’t work, i don’t know if i had to do something more in other components or something like that.
this is my code:
import React, { useState, useEffect, useMemo } from 'react';
import Hero from '../../components/hero';
import { getPets } from '../../api/petfinder';
import Pet from '../../components/pet';
import { useLocation } from 'react-router';
const SearchPage = () => {
const { search } = useLocation();
const queryParams = useMemo(() => {
return new URLSearchParams(search);
}, [search]);
const [pets, setPets] = useState([]);
useEffect(() => {
async function getPetsData() {
const petNameToFind = queryParams.get('name');
const petsData = await getPets('', petNameToFind);
setPets(petsData);
}
getPetsData();
}, [queryParams]);
return (
<div className="page">
<Hero displayText={`Results for ${queryParams.get('name')}`} />
<h3>Pets available for adoption near you</h3>
<main>
<div className="grid">
{pets.map((pet) => (
<Pet animal={pet} key={pet.id} />
))}
</div>
</main>
</div>
);
};
export default SearchPage;
I had the same problem and after hours found the problem.
The problem is in the order of routes.
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, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Navigation />
<Switch>
<Route path={'/search'}>
<SearchPage />
</Route>
<Route path={'/:type/:id'}>
<PetDetailsPage />
</Route>
<Route path={'/:type?'}>
<HomePage />
</Route>
</Switch>
</Router>
);
}
export default App;
This way my code worked.
It send a request as /animals?type=&query=shuri
This is how is was when I had the problem.
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, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Navigation />
<Switch>
<Route path={'/:type/:id'}>
<PetDetailsPage />
</Route>
<Route path={'/:type?'}>
<HomePage />
</Route>
<Route path={'/search'}>
<SearchPage />
</Route>
</Switch>
</Router>
);
}
export default App;
It send a request as /animals?type=search&query=.
Mostly this as a problem with the Switch by what I understand
3 Likes
i am having the same problem adn even i changed the order of the routes as well but still it does not render the result only shows Results for null. can please somebody help me here.
import React, { useState, useEffect, useMemo } from ‘react’;
import Hero from ‘…/…/components/hero’;
import { getPets } from ‘…/…/api/petfinder’;
import Pet from ‘…/…/components/pet’;
import { useLocation } from ‘react-router-dom’;
const SearchPage = () => {
const location = useLocation();
// const search = ‘REPLACE ME’;
const queryParams = useMemo(() => {
return new URLSearchParams(location);
}, [location]);
const [pets, setPets] = useState();
useEffect(() => {
async function getPetsData() {
const petNameToFind = queryParams.get(‘name’);
const petsData = await getPets(‘’, petNameToFind);
setPets(petsData);
}
getPetsData();
}, [queryParams]);
return (
<Hero displayText={
Results for ${queryParams.get('name')}
} />
<h3>Pets available for adoption near you</h3>
<main>
<div className="grid">
{pets.map((pet) => (
<Pet animal={pet} key={pet.id} />
))}
</div>
</main>
</div>
);
};
export default SearchPage;
Thank for your reply in advance. And also i cant seem to apply active css on the navlink and i will share that as well if you can look at it.
import { getPetTypes } from ‘…/…/api/petfinder’;
import Logo from ‘…/…/assets/logo.svg’;
import Search from ‘…/search’;
import { NavLink } from ‘react-router-dom’;
const Navigation = () => {
const [petTypes, setPetTypes] = useState();
useEffect(() => {
async function getPetTypesData() {
const { types } = await getPetTypes();
setPetTypes(types);
}
getPetTypesData();
}, );
return (
-
<NavLink
to="/"
className="nav-link"
activeClassName="nav-link-active"
exact
>
All Pets
</NavLink>
</li>
{petTypes
? petTypes.map((type) => (
<li key={type.name}>
<NavLink
to={`/${type._links.self.href.split('/').pop()}`}
key={type.name}
className="nav-link"
activeClassName="nav-link-active"
>
{type.name}s
</NavLink>{' '}
</li>
))
: 'Loading...'}
</ul>
</nav>
);
};
export default Navigation;
Hey, it would be easier to debug if you uploaded your whole project to Github and linked it 