HyperApp Router

Routing is the ability to move between different screens inside the same HyperApp application.

To add this functionality to your application, you can use hyperapp-router as a mixin.

import { Router } from "hyperapp-router"

Usage

app({
  view: [
    ["/", (state, actions) => <h1>Home</h1>],
    ["/login", (state, actions) => <h1>Login</h1>],
    ["/:user", (state, actions) => <h1>Hi {state.router.params.user}</h1>],
    ["*", (state, actions) => <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.

API

state

params

Type: { foo: string, ... }

The matched route params.

route	location.pathname	state.router.params
/:foo	/hyper	{ foo: "hyper" }

match

Type: string

The matched route.

actions

go

Type: (path)

• path: string

Update location.pathname.

events

route

Type: (state, actions, data, emit) | Array<route>

• data
  • params
  • match

Fired when a route is matched.