Shop filters that live in the URL
The starter renders products inside a MemoryRouter that starts at /shop?page=2, and shows the current query string in <code id="url">.
Wire the three category checkboxes (name="cat", values shoes, jackets, socks) and the <select id="sort"> (relevance or price-asc) to the URL with useSearchParams: several categories become repeated cat keys (cat=jackets&cat=shoes).
Show only products whose category is selected (all when none are), sorted by price when sort=price-asc. Each product is an <li className="product">.
Every filter or sort change must **remove page** from the URL. Don't keep the filters in useState: read them from the URL.
What Check tests
- At the start all five products show and the URL has
page=2 - Ticking jackets shows only jackets, writes
cat=jacketsand dropspage - Ticking shoes too keeps both categories in the URL
- The checkboxes reflect the URL
- Sorting by price puts the cheapest first and writes
sort=price-asc - Filters are read from the URL, not copied into useState
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.