ump-plugin-router

UMP Router Plugin — simple page routing for UMP apps (stack-based, with page lifecycle events).

Install

npm install ump-plugin-router --save

Usage

import { Router, Route, routerPlugin, useRouter, useNavigate, useRoute, addPageLifecycleListener, } from 'ump-plugin-router';

// Register with routes: pm.register(routerPlugin({ routes: [ { path: '/', component: HomePage }, { path: '/detail', component: DetailPage }, ], initialRoute: '/', }));

// Render the router tree:

// Inside any component: const navigate = useNavigate(); navigate('/detail', { id: 42 });

const { path, params } = useRoute();

// Query-string navigation: a query string in the href/path is parsed into // params (all values are strings). The clean pathname is what <Route> // matches against, so <Route path="/detail"> still matches. navigate('/detail?id=42&from=list'); // → params { id: '42', from: 'list' }

// When both a query string and an explicit params object are given, the // explicit object wins on key collisions: navigate('/detail?id=42', { id: '7' }); // → params { id: '7' }

// Page lifecycle: addPageLifecycleListener('pageDidAppear', ({ path }) => { console.log('appeared', path); });

Lifecycle events: pageWillAppear, pageDidAppear, pageWillDisappear, pageDidDisappear.

See src/index.ts for the full API.

Plugin authoring

This is a UMP plugin. See docs/superpowers/specs/plugin-authoring-guide.md for the plugin model.