deku-router5

deku-router5

High-order components and components for Deku when using router5.

This package replaces router5-deku which is deprecated.

Example

Code Demo

Requirements

• deku >= 0.5.0
• router5 >= 2.0.0

routerPlugin

It will add your router instance in context.

import { tree, render } from 'deku';
import element from 'virtual-element';
import { routerPlugin } from 'deku-router5';
import App from './App';
import router from './router';

const myApp = tree()
    .use(routerPlugin(router))
    .mount(element(App));

render(myApp, document.getElementById('app'));

RouteNode HOC

routeNode(nodeName): high-order component to wrap a route node component.

Note: your router needs to use router5-listeners plugin.

import element from 'virtual-element';
import { routeNode } from 'deku-router5';
import { UserView, UserList, NotFound } from './components';

const Users = {
    render(props) {
        const { previousRoute, route } from props;

        switch (route.name) {
            case 'users.list':
                return element(UserList);
            case 'users.view':
                return element(UserView);
            default:
                return element(NotFound);
        };
    }
};

export default routeNode('users')(Users);

Link component

import element from 'virtual-element';
import { Link } from 'deku-router5';

const Menu = {
    render(props) {
        return element('nav', {}, [
            element(Link, { routeName: 'home', routeOptions: { reload: true } }, 'Home'),
            element(Link, { routeName: 'about', routeOptions: { reload: true } }, 'About')
        ]);
    }
}

export default Menu;

Changelog

rxjs-router5@5.1.0 (2017-09-29)

Feature

• rxjs-router5
  • #198 Add typings for rxjs-router5. (@acchou)

Committers: 1

• Andy Chou (acchou)