Intermediate
One route for every product
The product list links to /products/1, /products/2 and /products/3 (which doesn't exist). Add one route with a dynamic segment, /products/:productId, rendered by ProductPage.
In ProductPage, read the id with useParams(), find the product, and show its name in <h1 id="product-name">. If there is no such product, show <p id="not-found">Product not found</p> instead. Remember that params are strings.
What Check tests
- The page uses
useParams - Product 2 shows
Desk lamp - Product 1 shows
Blue mug - An unknown id shows
Product not found
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.