Riot.js v4対応 Router その２

14147 ワード
riot AdventCalendar JavaScript riot.js JavaScript テキストリンク

Riot.js Advent Calendar 2019 の6日目が空いていたので埋めます。

Riot Router

Riot.jsがv4になったことでRiot Routerも新しくなっていたので再入門します。
https://github.com/riot/route
前回の続きです。

URLパラメータ

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

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>
message.riot
<my-message>
  <p>{ props.message.slice(0, 1).toUpperCase() }{ props.message.slice(1) } World!!</p>
</my-message>
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直接アクセス対策)

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>


path="/:some/:route/:params"などにすることで、複数受け取ることも出来ます。

クエリパラメータ

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

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>

トリガー

Riot Routerの機能というよりは、Rawthの機能です。

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);
});
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>