An advanced router for Web Components
✓ Nested routes / states / rendering
✓ Handles asynchronous data fetching
✓ Lazy loading of routes with code splitting
✓ Exposes events through a pub/sub mechanism
✓ Implements route context for scoped messaging
✓ Handles nested asynchronous rendering (LitElement, SkateJs)
✓ Automatic configuration of router links
✓ Inherits from Slick Router
✓ Minimal dependencies: slick-router and Events class from nextbone
$ npm install --save nextbone-routing nextbone lodash-es
Requires a ES6 Promise implementation attached in window (native or polyfill)
Configure and start the router
import { Router } from 'nextbone-routing'
import LoginComponent from './login/component'
import ContactsRoute from './contacts/route'
function AsyncTasksRoute() {
return import('./tasks/route.js')
}
async function AsyncRegisterComponent() {
await import('./register-component.js')
return 'register-component'
}
// callback function that defines the route tree
// can be defined also as an array
const routes = function (route) {
route('application', { path: '/' }, function () {
route('home', { path: '', component: 'home-component' }) // define component with a tag name...
route('login', { component: LoginComponent }) // ... or with a constructor
route('register', { component: AsyncRegisterComponent }) // lazy load component definition
route('contacts', { class: ContactsRoute }) // define a route class that can control lifecycle and component
route('tasks', { class: AsyncTasksRoute }) // lazy load a route class. Webpack and Rollup does code splitting
})
}
const router = new Router({
routes,
outlet: '#app-container', // element where the root routes will be rendered. Can be an HTML element instance, a selector or a function returning a HTML element
log: true,
logError: true
});
//start listening to URL changes
router.listen();
//listen an react to events
router.on('before:activate', function(transition, route) {
const isAuthenticate = checkAuth();
if (!isAuthenticate && route.requiresAuth) {
transition.redirectTo('login');
}
})Define a Route class
import { Route } from 'nextbone-routing';
import { API } from '../data-api';
import ContactsComponent from './component';
export default class extends Route {
static component = ContactsComponent,
activate(){
// the route children will only be activated after API.getContactList is resolved
return API.getContactList().then(contacts => {
this.contacts = contacts
});
}
prepareEl(el) {
// called just after creating the element and before rendering the element
// @property decorator can also be used to bind route properties to el
el.contacts = this.contacts
}
})- API
- Guides
- Contact Manager Example of data down / events up pattern
- Nextbone Wires Shows code lazy loading and route animation
- Marionette Routing — Original project
Copyright © 2020 Luiz Américo Pereira Câmara. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.