# @mise/router

> router templates for for @mise/core

Latest version **0.0.11** (published 2018-01-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mise/router
pnpm add @mise/router
yarn add @mise/router
bun add @mise/router
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2018-01-20 |
| First published | 2018-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | dan b. |
| Maintainers | chadwickcockrel, blueseph |

## Links

- npm: https://www.npmjs.com/package/@mise/router
- npm.io page: https://npm.io/package/@mise/router

## Dependencies (1)

- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^2.1.0

## Recent versions

- 0.0.11 (latest) — 2018-01-20
- 0.0.10 — 2018-01-07
- 0.0.9 — 2018-01-07
- 0.0.8 — 2018-01-07
- 0.0.7 — 2018-01-07
- 0.0.6 — 2018-01-07
- 0.0.5 — 2018-01-07
- 0.0.4 — 2018-01-07
- 0.0.3 — 2018-01-06
- 0.0.2 — 2018-01-06
- 0.0.1 — 2018-01-06

## README

# Mise Routing

Declarative routing for [Mise](https://github.com/blueseph/mise)

### Installation

> npm i --save @mise/router

In your actual project

```js
import { dom, component } from '@mise/core';
import { Route, Link } from '@mise/router';
```

You can also use the UMD version

```js
<script async src="https://unpkg.com/@mise/core"></script>
<script async src="https://unpkg.com/@mise/router"></script>
<script type="javascript">
  const { dom, component } = mise;
  const { Route, Link } = miseRouter;
</script>
```

Neither Mise nor the router require compilation to run, but you won't be able to use JSX until you do.

### Examples

```js
import { dom, component } from '@mise/core';
import { Route, Switch } from '@mise/router';

import { template as HomeTemplate } from './components/home/home.template';
import { template as LoginTemplate } from './component/login/login.template';
import { template as RegisterTemplate } from './component/register/register.template';

import { template as TracksTemplate } from './components/tracks/tracks.template';
import { template as TrackTemplate } from './component/track/track.template';

import { state } from './state.js';
import { actions } from './actions.js';

component({
    template: state => actions => (
        <Switch>
            <Route path="/" template={HomeTemplate} />
            <Route path="/login" template={LoginTemplate} />
            <Route path="/register" template={RegisterTemplate} />
            
            <Route path="/tracks" template={TracksTemplate} />
            <Route path="/tracks/:id" template={TrackTemplate} />
        </Switch>
    ),
    state,
    actions,
    root: document.querySelector('#app');
})
```

More details can be found in the docs.

---
_Source: https://npm.io/package/@mise/router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._