Nextbone Routing
An advanced router for Web Components
Features
✓ 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
Installation
$ npm install --save nextbone-routing nextbone lodash-es
Requires a ES6 Promise implementation attached in window (native or polyfill)
Usage
Configure and start the router
{ return import'./tasks/route.js'} { await import'./register-component.js' return 'register-component'} // callback function that defines the route tree// can be defined also as an arrayconst routes = { } const 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 changesrouter; //listen an react to eventsrouter
Define a Route class
;;; static component = ContactsComponent { // the route children will only be activated after API.getContactList is resolved return API; } { // called just after creating the element and before rendering the element // @property decorator can also be used to bind route properties to el elcontacts = thiscontacts })
Documentation
- API
- Guides
Examples
- Contact Manager Example of data down / events up pattern
- Nextbone Wires Shows code lazy loading and route animation
Related Projects
- Marionette Routing — Original project
License
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.