composi-router
Client-side router for Composi applications.
This is an adaptation of Routie for Composi. It's been updated to use ES6 and cancel routes by returning false in the route callback.
Composi-Router works on browsers back to IE9.
Installation
npm i -D composi-router
Import and Use
Import Router
into your app.js
file:
Importing Router
creates a new instance of the router and exposes it on the window object as router
. You can use router
to define routes. To do so, pass an object with key/value pairs where keys are routes and values are callbacks to execute when the route loads:
Normally you would use a route to handle loading a component. The best way to do this is to use a functional component. Set a property on the state that you can use to render a component conditionally:
// Set up routes to set state on Component // In component: { superprops thiscontainer = 'section' thisstate = // Default component to show: activeComponent: 'dashboard' } { return <div class="app-root"> stateactiveComponent === 'dashboard' && <HeroDashboard heroes=thisstateheroes search=thissearch searchResults=thisstatesearchResults blurSearchInput=thisblurSearchInput /> stateactiveComponent === 'heroes' && <HeroList heroes=thisstateheroes deleteItem=thisdeleteItem addHero=thisaddHero /> stateactiveComponent === 'detail' && <HeroDetail hero=thisstateselectedHero deleteItem=thisdeleteItem onHeroNameChange=thisonHeroNameChange resetName=thisresetName saveName=thissaveName /> </div> }
Optional Parameters
// logs `undefined` // logs `'bob'`
Wildcard
Using *
with catch any routes that do not match previously defined routes. Use this as a catch all for any unexpected routes or for a 404:
Blocking a Route
You can block a route by returning false: