# Routes

Source: https://signy.dev/documentation/1/router/routes/

Map paths to components.

## Define routes

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

```js
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.

```js
const { Component, application, html, router, Link, Outlet } = Signy;

class Home extends Component {
  render() {
    return html`<p>Welcome home.</p>`;
  }
}

class About extends Component {
  render() {
    return html`<p>Signy has a router built in.</p>`;
  }
}

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

const appRouter = router({
  mode: "memory",
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
  ],
});

application(Layout).use(appRouter).mount("#router-basic");
```

## 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](https://signy.dev/documentation/1/router/navigation/index.html.md) and [Params and query](https://signy.dev/documentation/1/router/params-and-query/index.html.md).