Dynamic Route

Problem

Routes must be manually defined one by one, even when they follow predictable patterns based on data. Adding new content types or categories requires updating route configuration files, creating maintenance burden and tight coupling between data and routing code.

Solution

Define route patterns with variable segments that match multiple paths and extract parameters. This lets a single route handle entire categories like all product pages or user profiles.

Example

This example demonstrates a dynamic route pattern that matches any product ID, allowing one route configuration to handle all product pages.

// Single route definition with parameter placeholder handles all products
{
  path: '/products/:id',    // :id matches any value (123, 456, abc, etc.)
  component: ProductPage    // Same component renders with different data
}

// Usage: /products/123, /products/456, etc.
// The :id parameter is extracted and passed to ProductPage

Benefits

• Reduces boilerplate by handling multiple similar routes with one definition.
• Makes routing configuration data-driven and flexible.
• Automatically handles new content without route configuration changes.
• Extracts route parameters for use in components.
• Scales well as content grows without manual route additions.

Tradeoffs

• Can make routing configuration harder to understand at a glance.
• May create ambiguity when multiple patterns could match same URL.
• Requires validation of route parameters within components.
• Harder to generate static site maps or route lists.
• Can hide invalid routes until runtime rather than failing at build time.