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).
trailingSlash"ignore" | "strict"How trailing slashes are treated during route matching. "ignore" (default) ignores a single trailing slash on the pathname or on route path patterns, so /users/ matches path: "/users"; the URL itself is never rewritten. "strict" requires pathnames to match patterns exactly.
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.
featuresRouterFeaturesOpt-in feature flags that change the Router's behavior. Currently supports pathlessSSROutletDeferral, which uses React Canary's browser() API to defer unmatched outlet content to the browser during pathless SSR (this will become the default behavior in the next major version). 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>
  );
}