ナビゲーションとルーティングの追加 navigation-routing

ブラウザーを開き、AEM（http://localhost:4502/）にログインします。開始コードベースは、既にデプロイされている必要があります。

SPA ページテンプレート（http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html）に移動します。

一番外にある「ルートレイアウトコンテナ」を選択し、その​ ポリシー ​アイコンをクリックします。オーサリングのためにロック解除された​ レイアウトコンテナ ​を選択​ しない ​ように注意してください。

SPA 構造 ​という名前の新しいポリシーを作成します。

許可されたコンポーネント／一般 ​で​ レイアウトコンテナ ​のコンポーネントを選択します。

許可されたコンポーネント／WKND SPA REACT - 構造 で​ ナビゲーション ​コンポーネントを選択します。

許可されたコンポーネント／WKND SPA REACT - コンテンツ ​で、画像 ​および​ テキスト ​のコンポーネントを選択します。合計 4 つのコンポーネントを選択する必要があります。

「完了」をクリックして、変更を保存します。

ページを更新し、ロック解除された​ レイアウトコンテナ ​の上に​ ナビゲーション ​コンポーネントを追加します。

ナビゲーション ​コンポーネントを選択し、その​ ポリシー ​アイコンをクリックして、ポリシーを編集します。

SPA ナビゲーション ​の​ ポリシーのタイトル ​を使用して新しいポリシーを作成します。

「プロパティ」で、次の手順を実行します。

• 「ナビゲーションルート」を /content/wknd-spa-react/us/en に設定します。
• 「ルートレベルを除外」を 1 に設定します。
• 「すべての子ページを収集」チェックボックスをオフにします。
• 「ナビゲーション構造の深度」を 3 に設定します。

これにより、/content/wknd-spa-react/us/en の 2 レベル下のナビゲーションが収集されます。

変更を保存すると、テンプレートの一部として入力された Navigation が表示されます。

Sites コンソール（http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home）に移動します。「WKND SPA React ホームページ」を選択し、作成／ページ ​をクリックします。

「テンプレート」で「SPA ページ」を選択します。プロパティ ​で、タイトル ​に「Page 1」、名前に「page-1」と入力します。

「作成」をクリックし、ダイアログのポップアップで「開く」をクリックして、AEM SPA エディターでページを開きます。

新規​ テキスト ​コンポーネントをメインの​ レイアウトコンテナ ​に追加します。コンポーネントを編集し、RTE と H2 要素を使用して「Page 1」というテキストを入力します。

画像などのコンテンツを自由に追加できます。

AEM Sites コンソールに戻り、上記の手順を繰り返して、Page 1 の兄弟として Page 2 という名前の 2 番目のページを作成します。

最後に、3 番目のページである Page 3 を、Page 2 の​ 子 ​として作成します。完了すると、サイト階層は次のようになります。

ナビゲーションコンポーネントを使用して、SPA の様々な領域に移動できるようになりました。

AEM エディターの外部でページを開きます。http://localhost:4502/content/wknd-spa-react/us/en/home.html。ナビゲーション ​コンポーネントを使用して、アプリの様々なビューに移動します。

ブラウザーのデベロッパーツールを使用して、ナビゲート中にネットワークリクエストを調べます。以下のスクリーンショットは、Google Chrome ブラウザーからキャプチャしたものです。

最初のページを読み込んだ後、後続のナビゲーションでページ全体が更新されず、以前訪問したページに戻る際にネットワークトラフィックが最小化されていることを確認します。

新規タブで、AEM が提供する JSON モデル API を開きます。http://localhost:4502/content/wknd-spa-react/us/en.model.json。ブラウザー拡張機能を使用して JSON の形式を設定すると役立つ場合があります。

この JSON コンテンツは、SPAが最初に読み込まれる際にリクエストされます。 外側の構造は次のようになります。

{
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {},
   "/content/wknd-spa-react/us/en/home/page-2/page-3": {}
   }
}

:children には、作成した各ページのエントリが表示されます。 すべてのページのコンテンツは、この最初の JSON リクエストに含まれます。 ナビゲーションルーティングを使用すると、コンテンツが既にクライアントサイドで使用可能になっているため、SPA の後続のビューが素早く読み込まれます。

最初のページの読み込みが遅くなるため、最初の JSON リクエストで SPA の​ すべて ​のコンテンツを読み込むのは得策ではありません。次に、ページの階層の深度を収集する方法について説明します。

SPA Root ​テンプレートに移動します。http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app- template/structure.html。

ページプロパティメニュー／ページポリシー ​をクリックします。

SPA Root テンプレートにある「階層構造」タブでは、収集される JSON コンテンツを制御できます。 構造深度 ​では、root ​の下にある子ページのサイト階層内での収集深度が決定されます。「構造パターン」フィールドを使用して、正規表現に基づいて追加のページを除外することもできます。

「構造の深度」を 2 に更新します。

「完了」をクリックして、変更をポリシーに保存します。

JSON モデルを再度開きます。 http://localhost:4502/content/wknd-spa-react/us/en.model.json

{
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {}
   }
}

Page 3 のパス（最初の JSON モデルの /content/wknd-spa-react/us/en/home/page-2/page-3）が削除されています。これは、Page 3 が階層のレベル 3 にあり、レベル 2 の最大深度のコンテンツのみを含めるようにポリシーを更新したためです。

SPA ホームページ（http://localhost:4502/content/wknd-spa-react/us/en/home.html）を再度開き、ブラウザーのデベロッパーツールを開きます。

ページを更新すると、SPA Root である /content/wknd-spa-react/us/en.model.json への XHR リクエストが表示されます。このチュートリアルで前述した SPA ルートテンプレートの階層の深さ設定に基づいて、3 つの子ページのみが含まれます。 これには、Page 3 は含まれません。

デベロッパーツールを開いた状態で、Navigation コンポーネントを使用して Page 3 に直接移動します。

/content/wknd-spa-react/us/en/home/page-2/page-3.model.json に対して新しい XHR リクエストが行われることを確認します。

AEM Model Manager では、Page 3 の JSON コンテンツは使用せず、追加の XHR リクエストを自動的にトリガーします。

http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html に直接移動して、ディープリンクを試します。また、ブラウザーの「戻る」ボタンが引き続き機能することを確認します。

IDE で、ui.frontend/src/index.js にあるファイル index.js を開きます。

/* index.js */
import { Router } from 'react-router-dom';
...
...
 ModelManager.initialize().then(pageModel => {
    const history = createBrowserHistory();
    render(
    <Router history={history}>
        <App
        history={history}
        cqChildren={pageModel[Constants.CHILDREN_PROP]}
        cqItems={pageModel[Constants.ITEMS_PROP]}
        cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
        cqPath={pageModel[Constants.PATH_PROP]}
        locationPathname={window.location.pathname}
        />
    </Router>,
    document.getElementById('spa-root')
    );
});

App が React Router の Router コンポーネントにラップされていることを確認します。ModelManager は AEM SPA Editor JS SDK で提供され、JSON モデル API に基づいて動的ルートを AEM ページに追加します。

ui.frontend/src/components/Page/Page.js でファイル Page.js を開きます

class AppPage extends Page {
  get containerProps() {
    let attrs = super.containerProps;
    attrs.className =
      (attrs.className || '') + ' page ' + (this.props.cssClassNames || '');
    return attrs;
  }
}

export default MapTo('wknd-spa-react/components/page')(
  withComponentMappingContext(withRoute(AppPage))
);

Page SPA コンポーネントは、MapTo 関数を使用して、AEM の​ ページ ​を対応する SPA コンポーネントにマップします。withRoute ユーティリティは、cqPath プロパティに基づいて、SPA を適切な AEM 子ページに動的にルーティングするのに役立ちます。

ui.frontend/src/components/Header/Header.js で Header.js コンポーネントを開きます。

Header を更新して、ホームページへのリンクで <h1> タグをラップします。

  //Header.js
  import React, {Component} from 'react';
+ import {Link} from 'react-router-dom';
  require('./Header.css');

export default class Header extends Component {

    render() {
        return (
            <header className="Header">
            <div className="Header-container">
+              <Link to="/content/wknd-spa-react/us/en/home.html">
                    <h1>WKND</h1>
+              </Link>
            </div>
            </header>
        );
    }

デフォルトの <a> アンカータグを使用する代わりに、React Router が提供する <Link> を使用します。to= が有効なルートを指す場合、SPA はそのルートに切り替わり、ページ全体の更新は実行​ しません。ここでは、単にホームページへのリンクをハードコードして、Link の使用法について説明します。

ui.frontend/src/App.test.js で App.test.js のテストを更新します。

+ import { BrowserRouter as Router } from 'react-router-dom';
  import App from './App';

  it('renders without crashing', () => {
    const div = document.createElement('div');
-   ReactDOM.render(<App />, div);
+   ReactDOM.render(<Router><App /></Router>, div);
  });

App.js で参照される静的コンポーネント内で React Router の機能を使用しているため、単体テストを更新する際には考慮が必要です。

ターミナルを開き、プロジェクトのルートに移動して、Maven スキルを使用して AEM にプロジェクトをデプロイします。

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

AEM で SPA のいずれかのページに移動します。http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Navigation コンポーネントを使用して移動する代わりに、Header 内のリンクを使用します。

ページ全体の更新がトリガー​ されず、SPA ルーティングが機能していることを確認します。

必要に応じて、標準の <a> アンカータグを使用して Header.js ファイルで試します。

<a href="/content/wknd-spa-react/us/en/home.html">
    <h1>WKND</h1>
</a>

これは、SPA ルーティングと通常の web ページリンクの違いを説明するのに役立ちます。