Site / Site and the Router

What Foldkit gives you

Three pieces, all in Foldkit itself:

Routers. Built from combinators, literal, int, string, schemaSegment, rest, query, joined with slash and bound to a route case with mapTo. A router is a biparser: it parses an address into the route value, and called with the route's params it builds the address back.

ts
export const personRouter = pipe(
  literal('people'),
  slash(int('personId')),
  Route.mapTo(AppRoute.Person),
)

personRouter({ personId: 3 }) // '/people/3'

One parser. oneOf tries routers in the order you list them, and parseUrlWithFallback gives the route of the first that takes the address, or your NotFound route:

ts
const routeParser = Route.oneOf(
  personRouter,
  peopleRouter,
  filesIndexRouter,
  filesRouter,
  nestedRouter,
  homeRouter,
)

export const urlToAppRoute = Route.parseUrlWithFallback(routeParser, AppRoute.NotFound)

Two Messages from the runtime. Runtime.makeApplication's routing takes onUrlRequest and onUrlChange. The runtime listens for clicks on links: a primary click with no modifier key, on an <a> with no other target and no download. It cancels the browser's own navigation and sends onUrlRequest(UrlRequest.Internal({ url })) for a link on this origin, or UrlRequest.External({ href }) for any other. Back, Forward and the navigation Commands pushUrl and replaceUrl all send onUrlChange(url). init receives the starting URL.

Foldkit stops there, on purpose. It never moves to a URL by itself: a click becomes a Message, and update decides whether to pushUrl, replaceUrl or load. Its Route.Transition helpers answer which route a change entered or left, once you have built the transition yourself.