Vielzeug

Appearance

Named Routes & URL Builder ​

Problem ​

Implement named routes & url builder in a production-friendly way with @vielzeug/routeit while keeping setup and cleanup explicit.

Runnable Example ​

The snippet below is copy-paste runnable in a TypeScript project with @vielzeug/routeit installed.

Keep navigation refactor-proof with named routes:

ts
import { createRouter } from '@vielzeug/routeit';

const router = createRouter({ base: '/app' });

router
  .on('/', renderHome, { name: 'home' })
  .on('/users', renderUsers, { name: 'userList' })
  .on('/users/:id', ({ params }) => renderUser(params.id), { name: 'userDetail' })
  .on('/users/:id/posts/:postId', ({ params }) => renderPost(params), { name: 'userPost' })
  .start();

// Navigate by name — never hard-code paths
await router.navigate({ name: 'userDetail', params: { id: '42' } });
await router.navigate({ name: 'userDetail', params: { id: '42' }, hash: 'activity' });

// Build URLs for links
router.url('userDetail', { id: '42' }); // '/app/users/42'
router.url('userPost', { id: '1', postId: '99' }); // '/app/users/1/posts/99'
router.url('userList', undefined, { page: '2' }); // '/app/users?page=2'

Expected Output ​

  • The example runs without type errors in a standard TypeScript setup.
  • The main flow produces the behavior described in the recipe title.

Common Pitfalls ​

  • Forgetting cleanup/dispose calls can leak listeners or stale state.
  • Skipping explicit typing can hide integration issues until runtime.
  • Not handling error branches makes examples harder to adapt safely.