Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@nekijak

Riot.js v4対応 Router その2

More than 1 year has passed since last update.

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

Riot Router

Riot.jsv4になったことで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>

rr8_2019_12_06_111559(slt)(raw).gif
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>

rr9_2019_12_06_114520(slt)(raw).gif

トリガー

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>

rrc_2019_12_06_141010(slt)(raw).gif

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nekijak
流行りものは好きだけど、マイナーなものはもっと好き。
withonoware
「より理想へ」というチャレンジ精神を持ち続ける。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?