Edited at

Lightning Componet でページ遷移する〜LightningRouter の提案〜

More than 3 years have passed since last update.


Lightning Component のページ遷移の問題点

Lightning Component は「 Single-Page-Application (SPA) を構築できるフレームワークだ!」なんて触れ込みもありましたが、実のところ1ページ内でViewを切り替えるための Router をライブラリに持っていません。

また、ページ内でのView切替するための仕組みもなく、以前紹介し唯一の可能性であった navigateToComponent() もお蔵入りになってしまっています。

つまり、Lightning Component のページ遷移を考えたときによい解決策がない状態でした。


LightningRouter の提案

実は、Winter'16 で aura:locationChange イベントが追加されました。このイベントは、URLのクエリー文字列やハッシュが変更されたタイミングで発火するものです。この機能追加によって、待望の Router 機能を実装できるようになりましたので、Lightning Component を実現する LightningRouter コンポーネントをサンプル実装してみました。


サンプル実装

ルーティングを処理するコンポーネントのサンプル実装です。

初期表示するコンポーネント、ルーティング情報を属性として与えられることで、動作するようになっています。ルーティング処理自体は、locationが変化した際に発生するイベントを受け取り、ルーティング情報に従って{v.body}に表示するコンポーネントを切り替えているだけで単純なものです。


src/aura/LightningRouter/LightningRouter.cmp

<aura:component>

<aura:handler event="aura:locationChange" action="{!c.render}" />
<aura:handler event="init" action="{!c.render}" />
<aura:attribute name="init" type="String" access="global" />
<aura:attribute name="route" type="String" access="global" />

{!v.body}
</aura:component>



src/aura/LightningRouter/LightningRouterController.js

({

render : function (component, event, helper) {
var token = event.getParam("token");
var querystring = event.getParam("querystring");

var route = JSON.parse(component.get("v.route"));
if($A.util.isUndefined(token)) {
token = component.get("v.init");
}
var cmpName = route[token];

$A.createComponent(
"c:" + cmpName,
{
"aura:Id": cmpName,
},
function(newCmp){
if (component.isValid()) {
var body = component.get("v.body");
body.pop();
body.push(newCmp);
component.set("v.body", body);
}
}
);
}
})



利用方法

下記のように呼び出します。init 属性には初期表示する Lightning Component、route 属性には、ハッシュとそのハッシュがセットされた場合に表示する Lightning Component をJSON(連想配列)で記述します。


src/aura/LightningRouterApp/LightningRouterApp.app

<aura:application>

<c:LightningRouter
init="Sample1"
route='{
"Sample1" : "Sample1Cmp",
"Sample2" : "Sample2Cmp"
}'

/>
</aura:application>

あとは、ページとして表示する Lightning Component を用意し、下記のようにアンカータグでハッシュを呼び出せば、表示する Lightning Component を切り替えてページ遷移します。


src/aura/Sample1Cmp/Sample1Cmp.cmp

<aura:component>

<div>
Hello, Sample1!
<a href="#Sample2">Sample2</a>
</div>
</aura:component>


src/aura/Sample2Cmp/Sample2Cmp.cmp

<aura:component>

<div>
Hello, Sample2!
<a href="#Sample1">Sample1</a>
</div>
</aura:component>


GitHubリポジトリ

サンプルソースコードについては、ここで公開しています。

https://github.com/kuratani/LightningRouter


おわりに

以上のように、 Winter'16 で追加になったイベントを用いて、これまで Lightning Component になかった Router機能を実装しました。今回実装したものは、単純に Lightning Component を切り替えるシンプルな実装となっています。

実際に製品開発などで利用する場合は、Salesforce1で動作するように修正する、ページ遷移時のアニメーションを追加する、など必要に応じて拡張していく必要があります。