LIGHTWEIGHT SPA ROUTER

History++

A browser-native navigation engine for lifecycle routing, route guards, middleware, dynamic params, and predictable back-button behavior without owning your rendering layer.

Explore Examples Architecture Docs GitHub

Philosophy

History++ keeps browser-native navigation behavior intact while adding predictable route lifecycle orchestration.

The URL stays the source of truth. Routes describe UI state. Your application keeps control of rendering.

Native History First

Push, replace, and pop navigation stay close to the browser's own history stack.

Lifecycle Routing

Routes can react through onArrive, onMeet, onReturn, onExit, and onComeback hooks.

UI Agnostic

Render pages, modals, sheets, fragments, or app state with your own UI code.

Basic Usage Snapshot

Register routes, attach lifecycle handlers, then sync the current browser URL into the router on first load.

Route registration and initial URL sync

history.router("/", {
  onMeet() {
    console.log("Home");
  }
});

history.router("/about", {
  onMeet() {
    console.log("About");
  }
});

history.navigateReplace(location.pathname + location.search);

Runtime Architecture

History++ is designed around native URL state and lifecycle-aware route execution.

History++ routing architecture overview

Runtime Semantics

History++ explains navigation through route matching, context creation, guard checks, and lifecycle execution.

Route Context

Matched routes receive params, query data, navigation type, and user-provided state.

Guarded Transitions

canLeave can block unsafe movement and restore URLs during blocked pop navigation.

Middleware Pipeline

Registered middleware runs before route guards and lifecycle handlers.

Examples

Each example isolates one navigation idea so behavior is easy to inspect.

Foundations

01 - Basic Routing Minimal route registration and URL sync. 02 - Dynamic Params Routes such as /user/:id with extracted params. 05 - Hash vs History Compare hash mode and history mode behavior.

Navigation Semantics

03 - Lifecycle Visualizer See push, replace, and pop lifecycle order. 04 - Guards Blocking Prevent transitions with canLeave. 06 - End Route Terminal routes for mobile-like flows.

Runtime Patterns

07 - Modal Route Let routes control modal UI state. 08 - Bottom Sheet Route-driven bottom sheet state. 10 - Middleware Preprocess navigation with middleware.

Hybrid Navigation

11 - Lazy Loading Load route handlers on demand. 13 - HTML Hybrid Combine fetched fragments with SPA routing. 14 - Performance Compare matcher strategies and route caching.

Experimental Navigation Proposal

History++ explores the idea that native browser navigation can become a richer runtime layer when route lifecycle, guards, middleware, and matching are kept small and explicit.