@fluixi/router
Framework-agnostic router core: URL → a resolved match tree + navigation.
✨ Overview
@fluixi/router is the routing core: pure state and a subscribe API, with no
reactivity, no DOM, no view framework. View adapters (the Fluixi adapter lives in
@fluixi/core/router) render the match tree top-down, which makes
deeply nested layout/outlet rendering work by construction. See DESIGN.md.
📦 Installation
pnpm add @fluixi/router
🚀 Usage
import { createRouter, createMemoryHistory } from '@fluixi/router';
const routes = [
{ path: '/app', component: AppLayout, children: [
{ path: '/app/home', component: HomePage },
{ path: '/app/user/:id', component: UserPage },
]},
];
const router = createRouter({ routes, history: createMemoryHistory('/app/home') });
router.state().match; // { matched: [AppLayout, HomePage], params, pathname }
router.subscribe((s) => render(s.match));
router.navigate('/app/user/42');
router.state().match.params; // { id: '42' }
📖 API
| Export | What |
|---|---|
matchRoutes(routes, pathname) | pure matcher → RouteMatch | null |
createRouter({ routes, history, base? }) | Router with state(), subscribe(), navigate(), match(), destroy() |
createMemoryHistory(initial?) / createBrowserHistory() | pluggable history adapters |
🧭 Rendering contract
match.matched is parent → child. An adapter folds from the deepest child upward,
passing each rendered child to its parent as that parent's outlet: all concrete values,
never a deferred build. That top-down composition is what makes deeply nested <Outlet/>
rendering work at any depth.