ZLIQ-Router

ZLIQ

Router for the light zliq-framework.

Quickstart

To use ZLIQ in your project, first install it as an dependency:

$ npm install --save zliq zliq-router

Then initialize the router which hooks into document events

import {h, render} from 'zliq';
import {initRouter} from 'zliq-router';

let router$ = initRouter()

let app = <div>
        <a href="/route?param=value#anchor" />
    </div>;
render(app, document.querySelector('#app');

// Will be '/route {param: 'value'} anchor after click on link
router$.map(({route, params, anchor}) => console.log(route, params, anchor))

To route you could switch on route values.

let router$ = initRouter()

let app = <div>
        <a href="/route?param=value#anchor" />
        {
            if$(router$.$('route').is('route'),
                <h1>Subpage</h1>,
                <h1>Titel</h1>)
         )
        }
    </div>;
render(app, document.querySelector('#app');

Or you use the Router component. The component also registers its route so we can fallback to '/' on missing route. We can also add a '/404' route that gets triggered on a missing route if available.

import {h, render} from 'zliq';
import {initRouter, Router} from 'zliq-router';

let router$ = initRouter()

let app = <div>
        <a href="/route?param=value#anchor" />
        <Router router$={router$} route='/'>
            <h1>Titel</h1>
        </Router>
        <Router router$={router$} route='/route'>
            <h1>Subpage</h1>
        </Router>
    </div>;
render(app, document.querySelector('#app');

Logo based on: http://www.iconsfind.com/2015/11/25/candy-dessert-food-sweet-baby-icon/