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
NavLinks - Create
ProductsContextandProductsProvider - Wrap the application in the Provider
- Define state values in Provider with
useState - Set the state data in Provider with
useEffectandfetch(note theutilsfile with thehandleFetchhelper) Productsas a directory of product pages- Use context to get the fetched data
- Render a list of
Links to for each fetched product
/products:id➡Productto 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 (