ステンシルを使用したルーティングの概要
@ stencil / router は、 Stencil で使用するNPMパッケージであり、Webコンポーネントを利用したPWAのルートを簡単に定義できます。 ルーターのAPIは、 React Routerのと非常によく似ているため、構文については既にご存知かもしれません。
この投稿では、アプリシェル、ヘッダー、メニューのグローバルコンポーネントと、ホーム、アバウト、連絡先の3つのルートがある簡単な例を作成します。
セットアップと構成
まず、プロジェクトに @ stencil /routerパッケージがインストールされていることを確認します。
$ npm install @stencil/router
# or, using Yarn
$ yarn add @stencil/router
次に、Stencil構成ファイルの構成オブジェクトにルーターパッケージを含むcollectionsアレイが含まれていることを確認します。
exports.config = {
bundles: [
{ components: ['app-shell', 'app-header', 'app-menu'] }
],
collections: [
{ name: '@stencil/router' }
]
};
Stencilのスターターアプリを使用してプロジェクトを開始している場合は、 @stencil /routerパッケージと適切な構成が既に用意されています。
ルートの定義
ルートはグローバルで定義されます
The
<stencil-router id="router">
<stencil-route
url="/"
component="app-home"
router="#router"
exact={true}
/>
<stencil-route
url="/contact"
component="app-contact"
router="#router"
/>
<stencil-route
url="/about"
component="app-about"
router="#router"
/>
</stencil-router>
ルート/
URLでexact={true}
を使用して、ホームコンポーネントへのルートパスのみを照合していることに注意してください。
このようなルート構成は、アプリの最上位コンポーネント、ここではapp-shellに配置します。 ここで、アプリのルートコンポーネント全体は次のようになります。
import { Component } from '@stencil/core';
@Component({
tag: 'app-shell'
})
export class AppComponent {
render() {
return [
<app-header title="Fancy Alligator!" />,
<app-menu />,
<stencil-router id="router">
<stencil-route
url="/"
component="app-home"
router="#router"
exact={true}
/>
<stencil-route
url="/contact"
component="app-contact"
router="#router"
/>
<stencil-route
url="/about"
component="app-about"
router="#router"
/>
</stencil-router>
];
}
}
renderメソッドは、複数の最上位要素を返します。 これは、上記の例のように、最上位要素の配列を使用して実行できます。 または、ラッピングdiv要素で3つのトップレベル要素をラッピングすることによっても実行できます。
ルートへのリンク
アプリでルートにリンクするには、
render() {
return (
<ul>
<li>
<stencil-route-link
router="#router"
url="/"
activeClass="active"
exact={true}
>
Home
</stencil-route-link>
</li>
<li>
<stencil-route-link
router="#router"
url="/about"
activeClass="active"
>
About
</stencil-route-link>
</li>
<li>
<stencil-route-link
router="#router"
url="/contact"
activeClass="active"
>
Contact
</stencil-route-link>
</li>
</ul>
);
}
ここでは、 activeClass プロパティを使用して、アクティブなルートにクラス名を設定しています。 ルートルートのexactプロパティもtrueに設定されているため、アクティブなクラスはURLと完全に一致する場合にのみ追加されます。
ルートへのデータの受け渡し
componentProps プロパティを使用して、構成内のルートに小道具を渡すこともできます。
<stencil-route
url="/contact"
component="app-contact"
router="#router"
componentProps={{ method: 'Walkie-talkie' }}
/>
そして、コンポーネントでは、@Propデコレータを使用してアクセスできます。
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'app-contact'
})
export class ContactComponent {
@Prop() method: string;
render() {
return <p>📞 Getting in touch by {this.method}</p>;
}
}
👷ステンシルルーターは開発が進んでおり、APIは急速に変化するはずです。 最新の変更については、公式リポジトリを参照してください。