I'm building a front-end project in React and in it, I want to be able to click on a thumbnail image component on a Home page that will redirect me to another page that renders components depending on the information for the thumbnail component that I clicked on.
For reference, this is a project that allows users to search for recipes from an external API. The thumbnail component they'll be clicking on will be an image and title of a recipe. When they click on that component they will get redirected to a meal page that has components for recipe name, image, servings, ingredients, directions, etc. and those components will render using information from the thumbnail from the Home page.
To summarize, here's what I want to do: When I click on a recipe in the Home page, I want to be redirected to a page that shows information for the recipe I clicked on.
So my main question is 'Is this possible?'
Thanks and feel free to let me know if you need more info.
To achieve that you probably should use a package named 'react-router-dom'.
<Route path="/recipe/:id">
<RecipePage />
</Route>
// Recipe page
import { useHistory, useParams } from 'react-router-dom'
const { id } = useParams()
const recipe = await fetch('api/recipe/' + id)