URL パラメータ

URL パラメータを用いることで、現在の URL にもとずいて route, view, data の宣言をすることができます。

似たような形の複数個の URL を全て、単一の route に紐づけたい場合がありますよね。例えば引用句のリストを表示するアプリケーションを作る場合には、それぞれの引用句のページの URL は以下のように似た形式になるはずです。

/quotes/1
/quotes/2
/quotes/3

これら複数の URL を（また、これ以外の同形式の URL に関しても同様）単一の route に紐づける方法は以下のようになります。

mount({
  '/quotes/:id': route({
    view: <QuoteView />
  })
})

URL の変化する部分が、コロン : から始まるセグメントによってどのように置き換えられているのか見ていきましょう。このセグメントの部分は Navi に URL parameter として認識され、どんな値にもマッチします。

そうすることで Navit は現在の URL Parameter の値を route にたいして req.params 経由で渡します。この値を用いると単一の route 設定でありながら複数の URL のためのデータをフェッチすることができます。

routes.js

helpers.js

index.js

import React from 'react'
import { mount, redirect, route } from 'navi'
import { QuoteView, fetchQuote } from './helpers'

const routes = mount({
  '/': redirect('/quotes/1'),

  // ':id' セグメントはどんな値にもマッチする。そしてマッチした値は、
  // route の中で `req.params.id` のかたちで使用することできる。
  '/quotes/:id': route(async req => {
    let id = req.params.id
    let quote = await fetchQuote(id)

    return {
      view: <QuoteView id={id} quote={quote} />,
    }
  })
})

export default routes

Build In Progress

req.params には URL parameter だけではなく、URL query string から抽出した情報全てが含まれいます。例えば以下のデモでは id と referrer パラメーターの両方を /quotes/3?welcome=true から取り出す方法を示しています。

routes.js

helpers.js

index.js

import React from 'react'
import { mount, redirect, route } from 'navi'
import { QuoteView, fetchQuote } from './helpers'

const routes = mount({
  '/': redirect('/quotes/1?welcome=true'),

  // The ':id' segment will match any value, and its value is made
  // available within the route at `req.params.id`.
  '/quotes/:id': route(async req => {
    console.log('params', req.params)

    let { id, welcome } = req.params
    let quote = await fetchQuote(id)

    return {
      view: <QuoteView id={id} quote={quote} welcome={welcome} />,
    }
  })
})

export default routes

Build In Progress

URL parameters は JavaScript ルーティングライブラリにおいて非常に標準的な機能ではありますが、URL parameters と asynchronous content を組み合わせることで、莫大な宣言的な力を手に入れることができます。MVC フレームワークにおけるコントローラーのように Navi の route 機能は、ビジネスロジックを実装し、エラーを投げ、View を選択することができます。— 全て route に渡された request オブジェクトに基づいて実現することができます。

Navi のコントローラー的な route 機能をさらに Context と Authentication のガイドで探求していきます。しかしまずはシンプルなところから見ていきましょう。次のガイドでお待ちしています。

始めよう« Previous Requests, Routes and MatchersNext »