Task: Store Filters in URL Query Parameters

Store Filters in URL Query Parameters

Objective

Persist search, filters, sorting, and pagination state in URL query parameters so users can share links and use browser back/forward navigation.

Why It Matters

URL-driven state is a core UX pattern in e-commerce. It enables shareable links, browser history navigation, and refresh persistence — all critical for usability.

Technical Requirements

• Use useSearchParams from react-router-dom
• Read initial state from URL parameters on page load
• Update URL parameters when any filter changes
• Support parameters: search, category, sortBy, sortOrder, page

Expected Behavior

• Navigating to /products?category=Electronics&sortBy=price&sortOrder=asc shows filtered results immediately
• Changing filters updates the URL without full page reload
• Browser back button restores previous filter state
• Refreshing the page preserves all active filters

Acceptance Criteria

• All filter values are reflected in the URL
• Page loads with correct filters when URL has parameters
• Changing filters updates URL in real-time
• Browser navigation (back/forward) works with filter states
• Empty/default values are omitted from URL (clean URLs)

Edge Cases

• Invalid parameter values in URL (e.g., page=999, category=NonExistent)
• URL with partially set parameters
• Direct navigation to URL with all parameters set

Hints

• useSearchParams() returns [searchParams, setSearchParams]
• Use searchParams.get('key') to read values
• Call setSearchParams(params) to update the URL
• Initialize component state from URL parameters in a useEffect or useMemo