Query String

Problem

Filter and search settings are stored only in component state, so refreshing the page or sharing links loses all applied filters. Users can’t bookmark searches, and browser back/forward buttons don’t preserve filter state, breaking expected navigation behavior.

Solution

Encode application state in URL query parameters to make it bookmarkable and shareable. This is especially useful for search filters, pagination, and other transient UI state.

Example

This example demonstrates reading filter state from URL parameters and updating the URL when filters change, making the state bookmarkable and shareable.

// Parse current URL parameters
const searchParams = new URLSearchParams(location.search);
const filter = searchParams.get('filter');
const page = searchParams.get('page') || '1';

// Update URL with new filters (makes it bookmarkable)
searchParams.set('filter', 'active');
// Push new URL state so back button works correctly
history.pushState({}, '', `?${searchParams}`);

Benefits

• Makes searches and filters bookmarkable and shareable via URL.
• Enables browser back/forward to work correctly with filter state.
• Allows users to return to exact application states by refreshing.
• Improves SEO by making filtered views accessible to search engines.

Tradeoffs

• Can create messy URLs with many parameters that are hard to read.
• Requires serializing complex state to simple string values.
• May expose sensitive information in URLs that appear in logs.
• Needs careful handling of URL length limits for large state.