Routing

@thewebformula/lithe uses directory based routing. All routes go in a 'routes' folder.

app/
└── routes/
    ├── index/
    │   └── index.js     # /
    ├── 404/
    │   └── index.js     # /404 (or any url that is not found)
    ├── one/
    │   └── index.js     # one/
    ├── two[id?]/
    │   └── index.js     # two/:id?
    ├── three/
    │   └── [id]/
    │       └── index.js # three/:id
    └── four/
        └── [...all]/
            └── index.js # four/*all (four/a/b/)

app/routes/index/index.js → /

app/routes/one/index.js → one

app/routes/two[id?]/index.js → two/:id?

app/routes/three/[id]/index.js → three/:id

app/routes/four/[...rest]/index.js → four/*rest

Directory route details

routes/index/index.js Root page (/)

routes/404/index.js Not found page. Auto redirect on non matching routes

index.js Route component file

[id] Directory that represents a url parameter

[id?] Directory that represents an options url parameter

name[id?] Inline url parameter to avoid sub folder

[...rest] Directory that represents catch-all route

[...rest?] Directory that represents optional catch-all route

Page

Accessing url parameters

import { Component } from '@thewebformula/lithe';
import html from './page.html'; // automatically bundles

export default class extends Component {
  // html page title
  static title = 'Page';

  // hook up imported html. Supports template literals (${this.someVar})
  static htmlTemplate = html;
  
  constructor() {
    super();
  }
  
  connectedCallback() {
    // one[id] one/:id one/value
    console.log(this.urlParameters); // { id: 'value' }

    // two[...rest] two/*rest two/a/b
    console.log(this.urlParameters); // { rest: 'a/b' }
  }
}