@void-snippets/react

createRouteContract

Type-safe route tree factory for React Router v7.

#What it does

Converts a tree of defineRoute() definitions into a typed route contract. Every route gets a build() function that TypeScript checks at compile time — missing path params, wrong types, and forgotten required fields are all caught before the code runs.

Requires react-router ≥7.0.0.

#Setup — one file, imported everywhere

typescript

// routes.ts
import { createRouteContract, defineRoute } from '@void-snippets/react';

export const AppRoutes = createRouteContract({
  auth: {
    login:    defineRoute('/auth/login').search<{ redirect?: string }>(),
    register: defineRoute('/auth/register'),
  },
  dashboard: {
    root: defineRoute('/dashboard', {
      breadcrumb: 'Home',
      title:      'Dashboard',
    }),
    users: {
      list: defineRoute('/dashboard/users', {
        permissions: ['ADMIN'],
        breadcrumb:  'Users',
      }).search<{ page: number; sort?: 'asc' | 'desc'; q?: string }>(),

      detail: defineRoute('/dashboard/users/:userId', {
        permissions: ['ADMIN'],
        breadcrumb:  'User Detail',
      }).search<{ tab?: 'profile' | 'settings' | 'activity' }>(),
    },
    settings: defineRoute('/dashboard/settings', { breadcrumb: 'Settings' }),
  },
});

Every leaf in the tree is now a ProcessedRoute with .path, .breadcrumb, .title, .permissions, and build().