Riot.js v4対応 Router その２

[Riot.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/riotjs) の6日目が空いていたので埋めます。

## Riot Router
`Riot.js`が`v4`になったことで`Riot Router`も新しくなっていたので再入門します。
https://github.com/riot/route
[前回](https://qiita.com/nekijak/items/bb87e1eec71f4b95190c)の続きです。

## URLパラメータ

前回から変更のあるところのみ載せます。
routeでのpath指定時に`:変数名`とすることで、URLパラメータとして受け取ることが出来ます。

```html:app.riot
<my-app>
  <my-router>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/greeting/hello">Hello</a></li>
        <li><a href="/greeting/goodbye">Goodbye</a></li>
        <li><a href="/greeting/hola">Hola</a></li>
      </ul>
    </nav>

    <my-route path="(/|/index.html)">
      Welcome to home
    </my-route>
    <my-route path="/greeting/:message">
      <my-message message="{ route.params[0] }"></my-message>
    </my-route>
  </my-router>
</my-app>
```
```html:message.riot
<my-message>
  <p>{ props.message.slice(0, 1).toUpperCase() }{ props.message.slice(1) } World!!</p>
</my-message>
```
```javascript:index.js
import { component, register } from 'riot'
import { Router, Route } from '@riotjs/route'
import App from './app.riot'
//import Hello from './hello.riot'
//import Goodbye from './goodbye.riot'
import Message from './message.riot'

// グローバルコンポーネントとして登録
register('my-router', Router);
register('my-route', Route);
//register('my-hello', Hello);
//register('my-goodbye', Goodbye);
register('my-message', Message);

// グローバルに登録せずに直接コンポーネントを生成＆マウント
component(App)(document.getElementById('app'));
```

`/greeting`としたので、`bundle.js`のパスも変更しておきます。(URL直接アクセス対策)

```html:index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Riot Router</title>
</head>
<body>
  <div id="app"></div>
  <script src="/scripts/bundle.js"></script>
</body>
</html>
```
![rr8_2019_12_06_111559(slt)(raw).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27443/35221920-7cc7-2d34-7c72-e25bd4810a9e.gif)
`path="/:some/:route/:params"`などにすることで、複数受け取ることも出来ます。

## クエリパラメータ
routeでのpath指定時に後ろを可変とすることで、クエリパラメータを受け取ることが出来ます。

```html:app.riot
<my-app>
  <my-router>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/greeting?message=hello">Hello</a></li>
        <li><a href="/greeting?message=goodbye">Goodbye</a></li>
        <li><a href="/greeting?message=hola">Hola</a></li>
      </ul>
    </nav>

    <my-route path="(/|/index.html)">
      Welcome to home
    </my-route>
    <my-route path="/greeting(.*)">
      <my-message message="{ route.searchParams.get('message') }"></my-message>
    </my-route>
  </my-router>
</my-app>
```
![rr9_2019_12_06_114520(slt)(raw).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27443/46c54750-639a-436e-ab38-1b22546a47a9.gif)

## トリガー

Riot Routerの機能というよりは、[Rawth](https://github.com/GianlucaGuarini/rawth)の機能です。

```javascript:index.js
import { component, register } from 'riot'
import { Router, Route, router  } from '@riotjs/route'
import App from './app.riot'
//import Hello from './hello.riot'
//import Goodbye from './goodbye.riot'
import Message from './message.riot'

// グローバルコンポーネントとして登録
register('my-router', Router);
register('my-route', Route);
//register('my-hello', Hello);
//register('my-goodbye', Goodbye);
register('my-message', Message);

// グローバルに登録せずに直接コンポーネントを生成＆マウント
component(App)(document.getElementById('app'));

// routerトリガー
router.on.value(path => {
  // 全てのURLに反応
  console.log(path);
});
```
```html:app.riot
<my-app>
  <my-router>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/greeting?message=hello">Hello</a></li>
        <li><a href="/greeting?message=goodbye">Goodbye</a></li>
        <li><a href="/greeting?message=hola">Hola</a></li>
        <li><a href="/unknown">unknown</a></li>
      </ul>
    </nav>

    <my-route path="(/|/index.html)">
      Welcome to home
    </my-route>
    <my-route path="/greeting(.*)">
      <my-message message="{ route.searchParams.get('message') }"></my-message>
    </my-route>
  </my-router>
</my-app>
```
![rrc_2019_12_06_141010(slt)(raw).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27443/6968f6f5-6fc8-567e-3a73-20469eea38dc.gif)