@mycuppa/router

Type-safe client-side routing for React applications.

Installation

npm install @mycuppa/router react react-dom
# or
pnpm add @mycuppa/router react react-dom

Quick Start

import { createRouter, Link, useRouter } from '@mycuppa/router'

// Create router
const router = createRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      handler: () => import('./pages/Home'),
    },
    {
      path: '/about',
      handler: () => import('./pages/About'),
    },
    {
      path: '/users/:id',
      handler: () => import('./pages/User'),
    },
  ],
})

// Navigate programmatically
router.push('/about')
router.replace('/login')
router.back()

// Use in components
function Navigation() {
  const router = useRouter()

  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <button onClick={() => router.push('/contact')}>Contact</button>
    </nav>
  )
}

Features

• 🎯 Type-Safe - Full TypeScript support with route parameters
• ⚡ Code Splitting - Lazy load routes for better performance
• 🔄 History API - Support for both history and hash routing
• 📱 Nested Routes - Build complex route hierarchies
• 🔐 Route Guards - Protect routes with authentication

Documentation

For detailed documentation, visit:

• Router Overview
• Routes Guide
• Navigation Guide

License

MIT