Documentation

Router

Typed React routing, navigation, preload lifecycle, query state, and instrumentation.

@plumile/router is the main runtime package for applications that need typed route definitions, typed navigation helpers, Suspense-friendly route resources, and instrumentation hooks.

Pages in this section

  • Router overview - The role of @plumile/router and the main concepts it exposes.
  • App shell - Create a RouterShell with app context, DevTools instrumentation, pending UI, and cleanup.
  • Route definitions - Define route trees, lazy route resources, nested routes, and prepare hooks.
  • Route modules - Split route resources, prepare functions, and route declarations into maintainable files.
  • Navigation - Use links and router navigation helpers instead of direct window location access.
  • Authenticated routes - Use wrapper routes to prepare auth state before rendering protected children.
  • Query and filters - Attach filter-query schemas to routes and consume typed URL state.
  • Preloading - Use route resources and prepare lifecycle for Suspense-friendly route data.
  • Relay integration - Use route preparation with Relay preload flows.
  • Relay preload example - Prepare a Relay query from route variables and router context.
  • Examples - Common router scenarios and where to find complete examples.
  • Migration - Migration paths from React Router, Next.js Router, and Reach Router.
  • DevTools - Inspect router activity with the private Chrome DevTools extension.