FUNSTACK Router

A modern React router built on the Navigation API.

Features

• ✅ Navigation API based - Uses the modern Navigation API (supported by Chrome, Firefox and Safari 26.2+)
  • Native <a> tags just work - No special <Link> component needed; use standard HTML links
• ✅ Async React compatible - navigations are transitions by default
• ✅ RSC Compatible - Designed to work also with React Server Components

Installation

npm install @funstack/router

AI Coding Agent Support

@funstack/router ships with an Agent skill that gives your coding assistant (Claude Code, Cursor, GitHub Copilot, etc.) knowledge about the router's API and best practices. After installing the package, run:

npx funstack-router-skill-installer

The installer will guide you through setting up the skill for your preferred AI agent. Alternatively, if you prefer npx skills:

npx skills add uhyo/funstack-router

Development

This is a pnpm monorepo. To set up the development environment:

# Install dependencies
pnpm install

# Build the router package
pnpm build

# Run the example app
pnpm --filter funstack-router-example dev

# Run tests
pnpm test

Packages

• packages/router - The main @funstack/router library
• packages/example - Example application
• packages/docs - Documentation site

Quick Start

import { Router, Outlet, route } from "@funstack/router";
import type { RouteDefinition, RouteComponentProps } from "@funstack/router";

function Layout() {
  return (
    <div>
      <nav>
        {/* Native <a> tags work for client-side navigation */}
        <a href="/">Home</a>
        <a href="/users">Users</a>
      </nav>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function Users() {
  return <h1>Users</h1>;
}

function UserDetail({ params }: RouteComponentProps<{ id: string }>) {
  return <h1>User {params.id}</h1>;
}

const routes: RouteDefinition[] = [
  route({
    path: "/",
    component: Layout,
    children: [
      route({ path: "", component: Home }),
      route({ path: "users", component: Users }),
      route({ path: "users/:id", component: UserDetail }),
    ],
  }),
];

function App() {
  return <Router routes={routes} />;
}

Documentation

Full documentation is available at router.funstack.work, including:

• API Reference - Components, hooks, utilities, and types
• Learn - Guides on nested routes, type safety, SSR, RSC, and more

Path Patterns

FUNSTACK Router uses the URLPattern API for path matching.

Pattern	Example	Matches
/users	/users	Exact match
/users/:id	/users/123	Named parameter
/files/*	/files/a/b/c	Wildcard

License

MIT