description: Lightweight, type-safe client-side router with nested routes, data loading, middleware, and named navigation. package: routeit category: routing keywords: [router, client-side, middleware, guards, navigation, history, spa, typed-routes] related: [stateit, permit, eventit] exports: [createRouter, createBrowserHistory, createMemoryHistory, redirectTo]

@vielzeug/routeit

Lightweight, type-safe client-side router with nested routes, data loading, middleware, and named navigation.

Package: @vielzeug/routeit  ·  Category: Routing

Key exports: createRouter, createBrowserHistory, createMemoryHistory, redirectTo

When to use: Lightweight, type-safe client-side router with nested routes, data loading, middleware, and named navigation.

Related: @vielzeug/stateit · @vielzeug/permit · @vielzeug/eventit

@vielzeug/routeit is part of Vielzeug and ships as a zero-dependency TypeScript package with ESM+CJS output.

What You Get

• Declarative route tables with nested names (dashboard.settings)
• Named and raw-path navigation through one navigate() API
• Route middleware, data loaders, and lazy route modules
• component + meta payloads on matched branch state
• Browser and memory history drivers
• Guard helpers via redirectTo()

Installation

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

Quick Start

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

const router = createRouter({
  routes: {
    home: {
      path: '/',
      handler: () => renderHome(),
    },
    dashboard: {
      path: '/dashboard',
      children: {
        index: {
          index: true,
          handler: () => renderDashboardHome(),
        },
        settings: {
          path: 'settings',
          data: async () => fetchSettings(),
          handler: ({ data }) => renderSettings(data),
        },
      },
    },
    notFound: {
      path: '*',
      handler: () => renderNotFound(),
    },
  },
});

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

Documentation

• Overview
• Usage Guide
• API Reference
• Examples
• React Integration Example
• Vue Integration Example
• Svelte Integration Example

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.