Deep Linking

Problem

URLs can’t capture specific views or states, making it impossible to bookmark or share links to exact locations. Users who refresh the page or share links land on generic views instead of the content they intended, forcing them to manually recreate complex application states.

Solution

Encode application state in URLs so users can bookmark or share links that restore specific views. This makes any app state addressable and shareable, turning transient UI into permanent references.

Example

This example demonstrates how to encode application state in URL query parameters to make filter selections shareable and bookmarkable.

// Encode filter state in URL query parameters
const params = new URLSearchParams({
  category: 'electronics',  // Filter by category
  minPrice: '100',          // Minimum price filter
  sort: 'price-asc'         // Sort order
});

// Update URL without page reload - state is now shareable
history.pushState({}, '', `/products?${params}`);

Benefits

• Makes application states bookmarkable and shareable via URLs.
• Enables users to return directly to specific views after refreshing.
• Improves SEO by making content addressable via unique URLs.
• Supports browser back/forward navigation through application states.
• Essential for features like filtered lists, search results, or modals.

Tradeoffs

• Adds complexity to state management and URL synchronization.
• Sensitive data in URLs may be visible in browser history or logs.
• URLs can become very long with complex state encoded.
• Requires careful handling of state hydration from URL parameters.
• May expose internal application structure through URL patterns.