@vielzeug/wayfinder

Client-side router with middleware and guards

Installation

pnpm add @vielzeug/wayfinder
npm install @vielzeug/wayfinder
yarn add @vielzeug/wayfinder

Quick Start

import { createRouter } from '@vielzeug/wayfinder';

const router = createRouter({
  routes: {
    home: { path: '/' },
    dashboard: {
      path: '/dashboard',
      children: {
        index: { index: true },
        settings: {
          path: 'settings',
          data: async () => fetchSettings(),
        },
      },
    },
  },
  notFound: {
    data: () => ({ message: 'Not found' }),
  },
});

await router.ready;

// React to state changes:
router.subscribe((state) => {
  const leaf = state.matches.at(-1);
  render(leaf?.name, leaf?.data);
});

await router.navigate({ name: 'dashboard.settings' });

Documentation

• Overview
• Usage Guide
• API Reference
• Examples
• Migration Guide

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.