
Owa Aquino
19,275 PointsNeed help in React Routing. (Personal Project)
Hi everyone,
Just needed help on this personal project of mine. I wanted to render a Page not found when I entered a url that not available in an Object literal that I made.
This is the gallery where if I clicked in the "Read More" link, it should direct me to the specific food/recipe.
const Card = ({ data }) => {
return (
<li className="card-item">
<img src={data.img_src} alt={data.title} />
<span>
<h3>{data.title}</h3>
<p>{data.description.substring(0, 255) + "..."}</p>
<NavLink to={`/recipie/${data.slug}`}>Read More</NavLink>
</span>
<Switch>
<Route path={`/recipie/${data.slug}`} component={() => <Recipie />} />
</Switch>
</li>
);
};
Somehow when I entered a wrong slug (ex /recipe/egg0a0123 ) which is not a slug of any of my object literals, It returns a blank page instead of a Page not found.
Here is my code for rendering the page. But I don't know where should I put the Render of Page not found.
const Recipie = ({ match }) => {
let slug = match.params.slug;
// console.log(Object.keys(Recipies).includes(slug));
// if (Object.keys(Recipies).includes(slug)) {
// console.log("ohyeah!");
// } else {
// return <NotFound />;
// }
let recepie = Recipies.filter(recepie => recepie.slug === slug).map(
(recepie, key) => {
return (
<div className="recipie-container" key={key}>
<div className="recipie-top">
<div className="recipie-left">
<h2>{recepie.title}</h2>
<p>{recepie.description}</p>
<p>
<strong>Ingredients</strong>
</p>
<ul>
{recepie.ingredients.map((ingredient, key) => {
return <li key={key}>{ingredient}</li>;
})}
</ul>
</div>
<div className="recipie-right">
<img src={recepie.img_src} alt={recepie.title} />
</div>
</div>
<div className="steps">
<p>
<strong>Steps</strong>
</p>
<ol>
{recepie.steps.map((step, key) => {
return <li key={key}>{step}</li>;
})}
</ol>
</div>
</div>
);
}
);
return <div>{recepie}</div>;
};
Here is the GitHub repo of the project. Sorry I haven't able to make it live yet.
https://github.com/owaaquino/Recipie-Viewer-App
Thank you very much!