URL Routing

Route Pattern Syntax

// Route patterns on AppPages
/leads                     // Static route — no parameters
/leads/:id                 // Single parameter
/leads/:id/edit            // Nested route with parameter
/reports/:year/:month      // Multiple parameters
/documents/:category/:id   // Multiple segments

Route Matching Rules

• Routes are matched from most specific to least specific
• /leads/123 matches /leads/:id — not /leads
• All routes are relative to the app's base URL: /app/{tenantId}/{appId}
• If no route matches, the app renders the 404 page (or redirects to the home page if no 404 AppPage is defined)

AppPage Route Config

// AppPage configuration
{
  "pageId": "lead-detail",
  "title": "Lead Detail",      // Supports tokens: "Lead: {{ route.id }}"
  "route": "/leads/:id",
  "isHome": false,
  "breadcrumbParent": "leads-list",   // Parent page for breadcrumb chain
  "requiredRoles": []          // Empty = all app users
}

Route Hierarchy for Breadcrumbs

The breadcrumbParent field creates the breadcrumb hierarchy independently of the URL structure. Even if /leads/:id/edit is not nested under /leads/:id in the URL, you can define the breadcrumb chain:

// leads-list:   route=/leads,        breadcrumbParent=null (root)
// lead-detail:  route=/leads/:id,     breadcrumbParent="leads-list"
// lead-edit:    route=/leads/:id/edit, breadcrumbParent="lead-detail"

// Breadcrumb for lead-edit: Leads > Lead Detail > Edit

Deep Linking

All App Studio routes support deep linking. A user can share the URL /app/acme/crm/leads/lead-456 — the recipient navigates directly to the Lead Detail AppPage for lead-456 without needing to navigate from the list first.

Deep links work because:

• The App Studio SPA handles client-side routing
• The server is configured to serve index.html for all /app/* paths (SPA fallback)
• On load, the router reads the URL and renders the matching AppPage directly