Routes

Define routes

router() takes a list of routes. Install it with app.use() before mounting, and render an Outlet where the page goes.

import { application, Component, html, router, Link, Outlet } from 'signy';

class Layout extends Component {
  protected render() {
    return html`
      <nav>
        <${Link} to="/">Home</${Link}>
        <${Link} to="/about">About</${Link}>
      </nav>
      <main><${Outlet} /></main>
    `;
  }
}

const appRouter = router({
  routes: [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage },
    { path: '/users/:id', component: UserPage },
    { path: '*', component: NotFound },
  ],
});

application(Layout).use(appRouter).mount('#app');

A live router

This one uses memory history, so it does not change the address of this page.

Paths

• /users/:id captures a parameter.
• /users/:id? makes it optional.
• * matches anything, for a not found page.

History modes

mode is the browser history by default. 'hash' keeps the route after a #, which works on any static host. 'memory' keeps it in memory, for tests and widgets.

Route options

• redirect sends the route to another path.
• name lets you navigate by name.
• meta holds your own data, such as a page title.
• guards and loader are covered in Navigation and Params and query.