添加導航和路由 |開始使用AEM SPA Editor and React

了解如何使用SPA Editor SDK對應至AEM頁面，以支援SPA中的多個檢視。動態導航是使用React Router和React Core Components實現的。

目標

了解使用SPA編輯器時可用的SPA模型路由選項。
了解如何使用 React路由器來導覽SPA的不同檢視。
使用AEM React核心元件來實作由AEM頁面階層驅動的動態導覽。

您將建置的

本章將新增導覽至AEM中的SPA。導覽功能表由AEM頁面階層驅動，且將使用導覽核心元件.

新增導覽

必備條件

檢閱設定本地開發環境. 本章是對應元件不過，您只需要部署至本機AEM例項的SPA啟用AEM專案，便能順利完成。

開啟瀏覽器並登入AEM, http://localhost:4502/. 應已部署起始代碼庫。
導覽至 SPA頁面範本: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.
選取最外側 根佈局容器 按一下原則表徵圖。小心 not ，選擇 版面容器 取消鎖定以製作。
建立新策略，命名為 SPA結構:

在 允許的元件 > 一般 >選取 版面容器 元件。

在 允許的元件 > WKND SPA REACT — 結構 >選取導覽元件：

在 允許的元件 > WKND SPA REACT — 內容 >選取影像和文字元件。您應選取總計4個元件。

按一下完成以儲存變更。
重新整理頁面，然後新增導覽元件上方 版面容器:
選取導覽元件並按一下原則表徵圖可編輯策略。
使用 策略標題 of SPA導覽.

在屬性:
- 設定 導覽根目錄 to /content/wknd-spa-react/us/en.
- 設定 排除根層級 to 1.
- 取消選中 收集所有子頁.
- 設定 導覽結構深度 to 3.
這會收集下方深處的導覽2層 /content/wknd-spa-react/us/en.
儲存變更後，應會看到填入 Navigation 作為範本的一部分：

建立子頁面

接下來，在AEM中建立其他頁面，作為SPA中的不同檢視。我們也會檢查AEM提供的JSON模型的階層結構。

導覽至網站主控台： http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. 選取 WKND SPA React首頁 按一下建立 > 頁面:
在範本選取 SPA頁面. 在屬性輸入 第1頁 針對標題和 page-1 作為名稱。

按一下建立在對話方塊快顯視窗中，按一下開啟以在AEM SPA編輯器中開啟頁面。
新增文字元件至主 版面容器. 編輯元件並輸入文本： 第1頁 使用RTE和 H2 元素。

您可以隨意新增其他內容，例如影像。
返回AEM Sites主控台，並重複上述步驟，建立名為 第2頁 作為 第1頁.
最後建立第三個頁面， 第3頁 但作為子項 of 第2頁. 完成網站階層後，應如下所示：
導覽元件現在可用來導覽至SPA的不同區域。
在AEM編輯器外部開啟頁面： http://localhost:4502/content/wknd-spa-react/us/en/home.html. 使用導覽元件，導覽至應用程式的不同檢視。
在您導覽時，使用瀏覽器的開發人員工具來檢查網路請求。以下螢幕擷取畫面是從Google Chrome瀏覽器擷取。

請注意，在初始頁面載入後，後續導覽不會導致完整頁面重新整理，且當返回至先前造訪的頁面時，網路流量會最小化。

階層頁面JSON模型

接下來，檢查可帶來SPA多檢視體驗的JSON模型。

在新索引標籤中，開啟AEM提供的JSON模型API: http://localhost:4502/content/wknd-spa-react/us/en.model.json. 將瀏覽器擴充功能用於 JSON格式.

首次載入SPA時，會要求此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": {},
   "/content/wknd-spa-react/us/en/home/page-2/page-3": {}
   }
}
```
在 :children 您應該會看到已建立每個頁面的項目。所有頁面的內容都位於此初始JSON要求中。使用導覽路由，SPA的後續檢視會快速載入，因為內容已在用戶端提供。

載入不明智全部的SPA內容，因為這會減緩初始頁面載入速度。接下來，我們將查看頁面階層深度的收集方式。
導覽至 SPA根 範本： http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

按一下 頁面屬性功能表 > 頁面原則:
此 SPA根 範本有額外的 階層結構 標籤來控制收集的JSON內容。此 結構深度 決定網站階層中收集下方子頁面的深度根. 您也可以使用 結構模式 欄位，根據規則運算式篩選其他頁面。

更新 結構深度 to 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": {}
   }
}

請注意， 第3頁 路徑已移除： /content/wknd-spa-react/us/en/home/page-2/page-3 從初始JSON模型。這是因為 第3頁 位於階層中的第3層，我們已更新原則，僅包含最大深度為第2層的內容。

重新開啟SPA首頁： http://localhost:4502/content/wknd-spa-react/us/en/home.html 並開啟瀏覽器的開發人員工具。

重新整理頁面，您應該會看到 /content/wknd-spa-react/us/en.model.json，即SPA根。請注意，根據先前在教學課程中對SPA根範本進行的階層深度設定，僅包含三個子頁面。這不包括 第3頁.
開啟開發人員工具後，請使用 Navigation 元件直接導覽至 第3頁:

請注意，系統已對下列項目提出新的XHR請求： /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

AEM模型管理員了解 第3頁 JSON內容無法使用，並自動觸發其他XHR要求。
直接導覽至： http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. 另請注意，瀏覽器的返回按鈕可繼續運作。

Inspect React Routing

導航和路由的實現方式為 React路由器. React Router是React應用程式的導航元件集合。 AEM React核心元件使用React Router的功能來實施導覽元件。

接下來，檢查React Router與SPA的整合情況，並使用React Router進行實驗連結元件。

在IDE中開啟檔案 index.js at ui.frontend/src/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 包裝在 Router 元件 React路由器. 此 ModelManager，由AEM SPA Editor JS SDK提供，會根據JSON模型API將動態路由新增至AEM頁面。

開啟檔案 Page.js at ui.frontend/src/components/Page/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 屬性。

開啟 Header.js 元件於 ui.frontend/src/components/Header/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> 我們使用的錨記 <Link> 由React路由器提供。只要 to= 指向有效的路由，SPA將切換到該路由， not 執行完整頁面重新整理。在此，我們只需硬式編碼首頁的連結，以說明的使用 Link.

在更新測試 App.test.js at ui.frontend/src/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);
  });

由於我們使用的是React Router的靜態元件， App.js 我們需要更新單元測試來解釋。

開啟終端機，導覽至專案的根目錄，並使用您的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.

請注意，完整的頁面重新整理為 not 已觸發，且SPA路由正常運作。
（可選）嘗試 Header.js 使用標準 <a> 錨點標籤：
```
<a href="/content/wknd-spa-react/us/en/home.html">
    <h1>WKND</h1>
</a>
```
這有助於說明SPA路由與一般網頁連結之間的差異。

恭喜！

恭喜您，您已了解如何使用SPA Editor SDK對應至AEM頁面，以支援SPA中的多個檢視。動態導覽已使用React Router實作，並新增至 Header 元件。

添加導航和路由

目標

您將建置的

必備條件

將導覽新增至範本

建立子頁面

階層頁面JSON模型

Inspect React Routing

恭喜！

Business.Adobe.com 資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe