@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-next) 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.

📄 License

MIT © Fluixi