cycle-router is a driver for Cycle.js that allows to add multiple views and handle routing.
- Navigate with path or name
- BeforeEach hook
- Hash mode
$ npm install @hollwann/cycle-router
The usage is as simple as any other driver, here is an example of the main function using cycle-router.
import{makeDOMDriver}from'@cycle/dom'importmakeRouterDriverfrom'@hollwann/cycle-router'importrouterConfigfrom'./routerConfig'importrunfrom'@cycle/run'constmain=(sources)=>{constrouterView=sources.router.currentView(sources)constsinks={DOM:routerView.select('DOM'),router:routerView.select('router')}returnsinks}constdrivers={DOM:makeDOMDriver('#app'),router:makeRouterDriver(routerConfig)}run(main,drivers)You pass all the sources to your view and then you get the sinks returned. WithrouterView.select you can get any sink you get from that view.
You must specify a configuration file which should look like this.
importHomefrom'./views/Home'importLoginfrom'./views/Login'constroutes=[{path:'/',name:'home',view:Home,meta:{/*meta prop is optional*/requiresAuth:true}},{path:'/login',name:'login',view:Login}]constbeforeEach=(routeTo)=>{//This is just an exampleconstcurrentUser='user'//some valid user hereconstauthRequired=routeTo.meta.authRequiredif(authRequired&¤tUser)return{name:RouteTo.name}elseif(authRequired&&!currentUser)return{name:'login'}return{name:routeTo.name}}exportdefault{ routes,defaultView:Home,/*optional*/ beforeEach}beforeEach is an optional function, which is executed before entering a new route.
You can navigate passing a stream of objects to the router sink, whit the name of the route or ther path. A simple example could be:xs.of({name:'home'})
MIT
Copyright (c) 2020, Hollwann
