hyperapp-router
v0.2.2
Published
A frontend route handler for hyperapp
Downloads
15
Readme
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>
Fired when a route is matched.