Navigation API

Understand the Navigation API that powers FUNSTACK Router. Learn how it differs from the History API, why native <a> elements work for SPA navigation, and how to access Navigation API events directly when needed.

Nested Routes

Learn how to create layouts that persist across navigation, build hierarchical page structures, and share data between parent and child routes. This guide covers the core concepts of nested routing including the <Outlet> component, parameter inheritance, and practical layout patterns.

Type Safety

Discover how to access route params, navigation state, and loader data in a fully type-safe manner. This guide covers two approaches: receiving typed data via component props (recommended) and using hooks for advanced scenarios like accessing parent route data or avoiding prop drilling.

Server-Side Rendering

FUNSTACK Router supports three SSR modes depending on your deployment model. These guides cover each use case:

• How SSR Works — the default two-stage model where pathless routes produce an app shell and path-based routes activate after client hydration
• Static Site Generation — use the ssr prop to match path-based routes during SSR for richer pre-rendered output
• SSR with Loaders — set runLoaders: true for fully dynamic server-side rendering including loader data

React Server Components

FUNSTACK Router is designed to work with React Server Components. These guides cover how to define routes in server modules and use route features alongside RSC:

• React Server Components — define routes in server modules using the @funstack/router/server entry point and keep your client bundle lean
• RSC with Route Features — use loaders, typed hooks, and navigation state alongside RSC by splitting route definitions with bindRoute()

Form Actions

Learn how the router intercepts POST form submissions and runs action functions on the client. This guide covers the action/loader data flow and includes important guidance on progressive enhancement — your server should always be ready to handle POST requests as a baseline.

How Loaders Run

Understand when loaders execute, how their results are cached by navigation entry, and how different navigation types — push, back/forward, reload, and form submissions — affect whether loaders re-run.

Error Handling

Learn where to place Error Boundaries in your route tree, how to reset them on navigation with useLocation().entryId, and how loader errors bubble to the nearest boundary that wraps an <Outlet>.

Controlling Transitions

Learn how FUNSTACK Router uses React transitions to keep the old UI visible during navigation. Discover how to show pending indicators with useIsPending, why sync state updates via setStateSync bypass transitions for instant responsiveness, and how to opt out of transitions by keying Suspense boundaries.