Router

Routing

Takes a block

Where the current page renders. May sit at any depth inside app; pages declare their own paths.

Router(transition: …, duration: …) { … }

Example

app { Navbar { Navbar.Brand { Link("Acme", to: "/") } } Router(transition: .fade, duration: "200ms") }

Renders with the class wf-router, stable across releases, so a stylesheet may target it.

Props of Router
Prop Type Meaning
transition: .none .fade .slide

How a route change moves between pages

duration: String

How long each half of the transition plays, e.g. 200ms

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.