To add routing to your application, use the Router mixin.
import { Router } from "hyperapp"The router treats the view as an array of route/view pairs.
app({
view: [
["/", state => <h1>Hi.</h1>]
["*", state => <h1>404</h1>],
],
mixins: [Router]
})When the page loads or the browser fires a popstate event, the first route that matches location.pathname will be rendered.
Routes are matched in the order in which they are declared. To use the wildcard * correctly, it must be declared last.
| route | location.pathname |
|---|---|
| / | / |
| /:foo | Match [A-Za-z0-9]+. See params. |
| * | Match anything. |
To navigate to a different route use actions.router.go.
Type: { foo: string, ... }
The matched route params.
| route | location.pathname | state.router.params |
|---|---|---|
| /:foo | /hyper | { foo: "hyper" } |
Type: string
The matched route.
Type: (path)
- path: string
Update location.pathname.
Type: (state, actions, data, emit) | Array<route>
Fired when a route is matched.