FUNSTACK Router

A truly modern router for React SPA

Built on the Navigation API

FUNSTACK Router is built entirely on the Navigation API, the modern replacement for the History API. There is no fallback to the History API—FUNSTACK Router fully commits to the new standard. This means cleaner navigation handling, built-in interception of navigations, and a more predictable routing experience. Native <a> elements just work for client-side navigation—no special Link component needed.

Designed for Async React

In FUNSTACK Router, navigations are treated as transitions. This integrates seamlessly with React's concurrent features—Suspense boundaries are respected during navigation, and the previous page remains visible until the next one is ready. No need for manual loading states—your router and React work together out of the box.

Features

Navigation API

Built on the modern Navigation API instead of the History API for better navigation handling and state management.

URLPattern Matching

Uses the URLPattern API for powerful and flexible path matching with support for parameters and wildcards.

Nested Routes

First-class support for nested routing with the Outlet component for building complex layouts.

Data Loading

Built-in async data loading with loaders that run before route components render.

Transitions

Navigations are wrapped in React transitions, keeping the previous page visible while the next one loads.

RSC Compatible

Designed to work with React Server Components. Learn more

Quick Start

npm install @funstack/router

import { Router, route } from "@funstack/router";

const routes = [
  route({
    path: "/",
    component: Layout,
    children: [
      route({ path: "/", component: Home }),
      route({ path: "/about", component: About }),
    ],
  }),
];

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