lit-routing

Lit Routing 🔥

A lightweight wrapper for routing in lit-html apps. This library works with any routing library, if you provide a corresponding connector. A connector for the lightweight router Navigo is already provided.

Installing

Using npm:
npm i -S lit-routing

Using yarn:
yarn add lit-routing

Additionally, you need to install the routing library of your choice, e.g.:
npm i -S navigo
yarn add navigo

Usage

This library consists of a global Router object and a LitRouter component. First, you need to configure the router.

import {html} from 'lit-html';
import {Router, RouteConfig} from 'lit-routing';
import {NavigoConnector} from 'lit-routing/lib/connectors/navigo';

const routes: RouteConfig[] = [
  {path: '', template: document.createElement('button')},
  {path: '/settings', template: new SettingsPage()}, // <- suppose this is a LitElement / web component
  {path: '**', template: html`404 - not found`},
];

Router.initialize(NavigoConnector, routes, {useHash: true})

A route template can either be a lit-html template literal or a HTML element / web component. In order to provide a fallback route, a route with path '**' can be added as the last route.

Afterwards, you only need to use the <lit-router> element, where you want your routes to be displayed.