@echojs-ecosystem/router

Typed SPA routing — routes as signal-backed objects, not components.

Programmatic router for EchoJS. Syncs URL ↔ route state with guards, lazy loading, layouts, and Hyperdom bindings (Link, NavLink).

Features

• Route views — createRouteView, createLayoutView, createLazyRouteView
• Signal-backed state — $path, $params, $query, $activePage, $pending, $error
• Guards & redirects — createRouter({ guards, redirects }), chainRoute
• History adapters — browser, hash, memory, or custom
• Hyperdom — @echojs-ecosystem/router/hyperdom for Link, NavLink, createRouter

Install

npm install @echojs-ecosystem/router @echojs-ecosystem/reactivity @echojs-ecosystem/hyperdom

Quick start

import { createRouteView, createRoutes, createRouter } from "@echojs-ecosystem/router";

const homePage = createRouteView({
  name: "home",
  view: () => "Home",
});

const router = createRouter({
  history: "browser",
  routes: createRoutes([{ path: "/", name: "home", routeView: homePage }]),
});

router.start();
router.go("/");

Hyperdom

import { createRouter, NavLink } from "@echojs-ecosystem/router/hyperdom";

const router = createRouter({ history: "browser", routes });
router.start();

NavLink({ to: homePage, activeClass: "active", children: "Home" });

API

| Export | Description | |--------|-------------| | createRouter | Router instance | | createRoutes | Route tree builder | | createRouteView / createLayoutView | Page & layout views | | createLazyRouteView | Code-split routes | | createRoute | Legacy imperative routes | | createRouter({ guards, redirects }), chainRoute | Route operators |

Related packages

| Package | Role | |---------|------| | @echojs-ecosystem/url-state | Typed search params | | @echojs-ecosystem/framework | App bootstrap with router provider |

Documentation

echojs.dev/docs/packages/router