⬅️ Back to Frontend Architecture Index

Routing

1️⃣ Section Purpose

This section documents the frontend routing architecture: how URLs map to pages, how the application separates public vs. authenticated route groups, and how cross-cutting navigation behavior (guards, redirects, session handling, and 404 fallbacks) is designed.

It exists to keep navigation predictable and safe: users should always end up in the correct shell, protected pages must be gated, and logout/session-expiry must be handled consistently.

The design decisions captured here include: route grouping by shell, the use of a dedicated route guard, a deliberate public logout route to avoid race conditions, and a single global 404 fallback.

2️⃣ Scope & Boundaries

Included: - Route grouping (public vs. authenticated) - URL-to-page mapping and key route parameters - Authorization gating and redirect behavior - Logout/session-expiry navigation flow

  • Global loading (auth bootstrap) and 404 fallback behavior
  • Routing-related contract tests

Excluded: - UI chrome (header/sidebar layout) (documented under App Shell) - Data-fetching and API error strategies (documented under Data Access) - Domain page content and feature design (documented under Domains)

3️⃣ High-Level Diagram

graph TB URL["URL"] --> Router["AppRouter"] Router --> PublicGroup["Public routes"] Router --> AuthGroup["Authenticated routes"] PublicGroup --> PublicShell["AppPublicShell"] AuthGroup --> AppShell["AppShell"] AuthGroup --> Guard["RequireAuth"] Guard --> Page["Page"] Router --> NotFound["NotFound fallback"]

Contents

⬅️ Back to Frontend Architecture Index