Hyperapp Router

Hyperapp Router provides declarative routing for Hyperapp using the History API.

Try this example online.

import{h,app}from"hyperapp"import{Link,Route,location}from"@hyperapp/router"constHome=()=><h2>Home</h2>constAbout=()=><h2>About</h2>constTopic=({ match })=><h3>{match.params.topicId}</h3>constTopicsView=({ match })=>(<divkey="topics"><h2>Topics</h2><ul><li><Linkto={`${match.url}/components`}>Components</Link></li><li><Linkto={`${match.url}/single-state-tree`}>Single State Tree</Link></li><li><Linkto={`${match.url}/routing`}>Routing</Link></li></ul>{match.isExact&&<h3>Please select a topic.</h3>}<Routeparentpath={`${match.path}/:topicId`}render={Topic}/></div>)conststate={location: location.state}constactions={location: location.actions}constview=state=>(<div><ul><li><Linkto="/">Home</Link></li><li><Linkto="/about">About</Link></li><li><Linkto="/topics">Topics</Link></li></ul><hr/><Routepath="/"render={Home}/><Routepath="/about"render={About}/><Routeparentpath="/topics"render={TopicsView}/></div>)constmain=app(state,actions,view,document.body)constunsubscribe=location.subscribe(main.location)

Installation

npm i @hyperapp/router

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import{Link,Route,Switch,Redirect,location}from"@hyperapp/router"

If you don't want to set up a build environment, you can download Hyperapp Router from a CDN like unpkg.com and it will be globally available through the window.hyperappRouter object. We support all ES5-compliant browsers, including Internet Explorer 10 and above.

Usage

Add the location module to your state and actions and start the application.

conststate={location: location.state}constactions={location: location.actions}constmain=app(state,actions,(state,actions)=><Routerender={()=><h1>Hello!</h1>}/>,document.body)

Then call subscribe to listen to location change events.

constunsubscribe=location.subscribe(main.location)

Components

Route

Render a component when the given path matches the current window location. A route without a path is always a match. Routes can have nested routes.

<Routepath="/"render={Home}/><Routepath="/about"render={About}/><Routeparentpath="/topics"render={TopicsView}/>

parent

The route contains child routes.

path

The path to match against the current location.

render

The component to render when there is a match.

Render Props

Rendered components are passed the following props.

constRouteInfo=({ location, match })=>(<div><h3>Url: {match.url}</h3><h3>Path: {match.path}</h3><ul>{Object.keys(match.params).map(key=>(<li>{key}: {match.params[key]}</li>))}</ul><h3>Location: {location.pathname}</h3></div>)

location

The window location.

match.url

The matched part of the url. Use to assemble links inside routes. See Link.

match.path

The route path.

match.isExact

Indicates whether the given path matched the url exactly or not.

Link

Use the Link component to update the current window location and navigate between views without a page reload. The new location will be pushed to the history stack using history.pushState.

constNavigation=(<ul><li><Linkto="/">Home</Link></li><li><Linkto="/about">About</Link></li><li><Linkto="/topics">Topics</Link></li></ul>)

to

The link's destination url.

Redirect

Use the Redirect component to navigate to a new location. The new location will override the current location in the history stack using history.replaceState.

constLogin=({ from, login, redirectToReferrer })=>props=>{if(redirectToReferrer){return<Redirectto={from}/>}return(<div><p>You must log in to view the page at {from}.</p><buttononclick={()=>{auth.authenticate(userId=>login(userId))}}>
Log in
</button></div>)}

to

The redirect's destination url.

from

Overwrite the previous pathname. See location.previous.

Switch

Use the Switch component when you want to ensure only one out of several routes is rendered. It always renders the first matching child.

constNoMatchExample=(<Switch><Routepath="/"render={Home}/><Routepath="/old-match"render={()=><Redirectfrom="/old-match"to="/will-match"/>}/><Routepath="/will-match"render={WillMatch}/><Routerender={NoMatch}/></Switch>)

Modules

location

pathname

Same as window.location.pathname.

previous

The previous location.pathname. Useful when redirecting back to the referrer url/pathname after leaving a protected route.

go(url)

Navigate to the given url.

License

Hyperapp Router is MIT licensed. See LICENSE.