I used this API: https://dummyjson.com/
- Create main page components (
Dashboard
,About
,Products
,Product
) - Define routes for them using
BrowserRouter
,Routes
, andRoute
- Make a navigation bar with
NavLink
s - Create
ProductsContext
andProductsProvider
- Wrap the application in the Provider
- Define state values in Provider with
useState
- Set the state data in Provider with
useEffect
andfetch
(note theutils
file with thehandleFetch
helper) Products
as a directory of product pages- Use context to get the fetched data
- Render a list of
Link
s to for each fetched product
/products:id
➡Product
to render a single product- Grab the dynamic segment of the URL (
id
) withuseParams()
- Get the current product from the context
- Render the product's data!
- Grab the dynamic segment of the URL (