router5

A starting guide to

Creating a router

import { Router5 } from 'router5';

const myRouter = new Router5();

Setting options

import { Router5 } from 'router5';

const myRouter = new Router5([], {
    useHash: true,
    defaultRoute: 'home'
});

// Alternative syntax

const myRouter = new Router()
    .setOption('useHash', true)
    .setOption('defaultRoute', 'home');

Configuring routes

import { Router5, RouteNode } from 'router5';

const myRouter = new Router()
    .setOption('useHash', true)
    .setOption('defaultRoute', 'home')
    .addNode('home', '/home')
    .addNode('contact', '/contact')
    .addNode('admin', '/admin');

For alternative ways to configure routes: http://router5.github.io/docs/configuring-routes.htm

Protecting routes

import { Router5 } from 'router5';

const myRouter = new Router()
    .setOption('useHash', true)
    .setOption('defaultRoute', 'home')
    .addNode('home', '/home')
    .addNode('contact', '/contact')
    .addNode('admin', '/admin', canActivateAdmin);


function canActivateAdmin() {
    return true;
}

Add plugins

import { Router5 } from 'router5';
import { listenersPlugin } from 'router5-listeners';
import { historyPlugin } from 'router5-history'

const myRouter = new Router()
    .setOption('useHash', true)
    .setOption('defaultRoute', 'home')
    .addNode('home', '/home')
    .addNode('contact', '/contact')
    .addNode('admin', '/admin', canActivateAdmin)
    .usePlugin(listenersPlugin())
    .usePlugin(historyPlugin());

Start your router

import { Router5 } from 'router5';
import { listenersPlugin } from 'router5-listeners';
import { historyPlugin } from 'router5-history'

const myRouter = new Router()
    .setOption('useHash', true)
    .setOption('defaultRoute', 'home')
    .addNode('home', '/home')
    .addNode('contact', '/contact')
    .addNode('admin', '/admin', canActivateAdmin)
    .usePlugin(listenersPlugin())
    .usePlugin(historyPlugin())
    .start();

export default myRouter;

Navigate to a route

import myRouter from './my-router';

const params = {};
const options = {replace: false, reload: false};

myRouter.navigate('admin', params, options, callback);

function callback(err, state) {
    // state =>
    // {
    //     name: 'admin',
    //     params: {},
    //     path: '/admin'
    // }
}

Learn more

- Route deactivation

- Middleware

- Listeners

- ...

http://router5.github.io