@ 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アレイが含まれていることを確認します。

stencil.config.js
exports.config = {
  bundles: [
    { components: ['app-shell', 'app-header', 'app-menu'] }
  ],
  collections: [
    { name: '@stencil/router' }
  ]
};


Stencilのスターターアプリを使用してプロジェクトを開始している場合は、 @stencil /routerパッケージと適切な構成が既に用意されています。

ルートの定義

ルートはグローバルで定義されますを含む要素個々のルート定義の要素。 ルートはstencil-router要素内にレンダリングされます。

The 持っている必要があります id その要素は参照できます。 3つのルートの簡単な例を次に示します。

<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に配置します。 ここで、アプリのルートコンポーネント全体は次のようになります。

/components/app-shell/app-shell.tsx
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つのトップレベル要素をラッピングすることによっても実行できます。

ルートへのリンク

アプリでルートにリンクするには、 要素と id ルーターと url 。 たとえば、app-menuコンポーネントのrenderメソッドは次のとおりです。

/components/app-menu/app-menu.tsx(部分的)
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デコレータを使用してアクセスできます。

app-contact.tsx
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は急速に変化するはずです。 最新の変更については、公式リポジトリを参照してください。