FUNSTACK Router

GitHub

API Reference

Components

Core components for building routing in your React application.

<Router>

The main router component that provides routing context.

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

<Router
  routes={routes}
  onNavigate={(event, info) => {
    console.log("Navigating to:", event.destination.url);
    console.log("Matched routes:", info.matches);
    console.log("Will intercept:", info.intercepting);
  }}
/>

Props

PropTypeDescription
routesRouteDefinition[]Array of route definitions
onNavigateOnNavigateCallbackCallback fired before navigation is intercepted. Receives the NavigateEvent and an info object with matched routes and whether the router will intercept the navigation.
fallback"none" | "static"Fallback mode when Navigation API is unavailable. "none" (default) renders nothing; "static" renders matched routes using window.location without navigation interception (MPA behavior).
ssrSSRConfigSSR configuration for route matching during server-side rendering. Accepts an object with path (the pathname to match against) and an optional runLoaders boolean (defaults to false). When runLoaders is false, routes with loaders are skipped during SSR. Once the client hydrates, the real URL from the Navigation API takes over. See the SSR guide for details.

<Outlet>

Renders the child route's component. Used in parent routes for nested layouts.

import { Outlet } from "@funstack/router";

function Layout() {
  return (
    <div>
      <header>My App</header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}