Function: createRouter()

Documentation / @xmachines/play-router / createRouter

function createRouter(options): VanillaRouter;

Defined in: create-router.ts:73

Create vanilla router for framework-agnostic routing.

Architecture:

• Just wraps history and routeTree
• Does NOT embed routeMap (providers need it as prop)
• Framework-agnostic history management only

Why no routeMap:

• Router doesn’t know about state IDs (that’s Play-specific)
• RouteMap is the bridge between router and actor
• Provider receives routeMap as prop to do path → state ID resolution

Usage (parallel to TanStack mode):

// Both modes: identical setup
const routeTree = extractMachineRoutes(machine);
const routeMap = createRouteMap(routeTree);
const history = createBrowserHistory({ window });

// Vanilla router
const router = createRouter({ routeTree, history });

// Provider needs routeMap as prop (router doesn't have it)
<PlayRouterProvider
  actor={actor}
  router={router}
  routeMap={routeMap}  // ← Must pass separately
  renderer={(currentActor, currentRouter) => {
    void currentRouter;
    return <Renderer actor={currentActor} components={components} />;
  }}
/>

Compare to TanStack mode:

// TanStack router (external library)
const router = TanStackCreateRouter({ routeTree, history });

// Provider needs routeMap as prop (same as vanilla!)
<PlayRouterProvider
  actor={actor}
  router={router}
  routeMap={routeMap}  // ← Must pass separately
  renderer={(currentActor, currentRouter) => {
    void currentRouter;
    return <Renderer actor={currentActor} components={components} />;
  }}
/>

Parameters

Parameter	Type
options	{ history: BrowserHistory; routeTree: RouteTree; }
options.history	BrowserHistory
options.routeTree	RouteTree

Returns

VanillaRouter