Route Parameter

Problem

URLs can’t capture specific resources or entities, forcing applications to use generic paths with client-side state management. Users can’t bookmark or share links to specific items, and refreshing the page loses context about which resource was being viewed.

Solution

Extract variable segments from URLs to identify specific resources to display. This makes URLs meaningful and lets users share links to specific items.

Example

This example demonstrates extracting dynamic route parameters from the URL to load specific user profiles based on the ID in the path.

// Route definition with :id parameter
<Route path="/users/:id" element={<UserProfile />} />

// Component extracts the id from URL
function UserProfile() {
  // Extract id parameter from URL (e.g., /users/123 -> id = "123")
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

Benefits

• Makes URLs bookmarkable and shareable for specific resources.
• Enables deep linking directly to specific content.
• Works with browser history for proper back/forward navigation.
• Makes application state readable from the URL.

Tradeoffs

• Requires validating parameters and handling invalid or missing resources.
• Can expose internal IDs or structure in URLs.
• Needs error handling for resources that don’t exist.
• May require encoding for complex parameter values.