添加导航和路由 navigation-routing
了解如何使用SPA编辑器SDK将映射到AEM页面,从而支持SPA中的多个视图。 动态导航是使用React Router和React Core Components实现的。
目标
- 了解使用SPA编辑器时可用的SPA模型路由选项。
- 了解如何使用 React路由器 在SPA的不同视图之间导航。
- 使用AEM React核心组件实施由AEM页面层次结构驱动的动态导航。
您将构建的内容
本章将导航添加到AEM中的SPA。 导航菜单由AEM页面层次结构驱动,将利用提供的JSON模型。 导航核心组件.
前提条件
查看所需的工具和设置说明 本地开发环境. 本章是 映射组件 但是,本章是部署到本地SPA实例中的启用AEM的AEM项目,您需要这样做。
将导航添加到模板 add-navigation-template
-
打开浏览器并登录到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.
这将收集下方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页 但作为 子项 之 第2页. 完成之后,站点层级应如下所示:
-
导航组件现在可用于导航到SPA的不同区域。
-
在AEM编辑器外部打开该页面: http://localhost:4502/content/wknd-spa-react/us/en/home.html. 使用 导航 导航到应用程序的不同视图。
-
在导航时,使用浏览器的开发人员工具检查网络请求。 以下屏幕截图是从Google Chrome浏览器中捕获的。
请注意,在初始页面加载后,后续导航不会导致完全页面刷新,并且在返回到先前访问的页面时,网络通信量会降至最低。
层次结构页面JSON模型 hierarchy-page-json-model
接下来,检查驱动SPA多视图体验的JSON模型。
-
在新选项卡中,打开由AEM提供的JSON模型API: http://localhost:4502/content/wknd-spa-react/us/en.model.json. 使用浏览器扩展来 设置JSON格式.
首次加载SPA时会请求此JSON内容。 外部结构如下所示:
code language-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内容的ID,因为这会减慢初始页面加载的速度。 接下来,让我们看一下如何收集页面的层次结构深度。
-
导航至 SPA根目录 模板位于: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.
单击 页面属性菜单 > 页面策略:
-
此 SPA根目录 模板有一个额外的 层次结构 选项卡来控制收集的JSON内容。 此 结构深度 确定网站层次结构中收集子页面的深度 根. 您也可以使用 结构模式 用于根据正则表达式筛选掉其他页面的字段。
更新 结构深度 到 2:
单击 完成 以保存对策略所做的更改。
-
重新打开JSON模型 http://localhost:4502/content/wknd-spa-react/us/en.model.json.
code language-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 并打开浏览器的开发人员工具。
刷新该页,您应该会看到XHR请求
/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路由 react-routing
导航和路由的实现方式 React路由器. React Router是用于React应用程序的导航组件集合。 AEM React核心组件 使用React Router的功能实现 导航 之前步骤中使用的组件。
接下来,检查React Router如何与SPA集成,并使用React Router的 链接 组件。
-
在IDE中打开文件
index.js
在ui.frontend/src/index.js
.code language-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编辑器JS SDK提供,用于根据JSON模型API向AEM页面添加动态路由。 -
打开文件
Page.js
在ui.frontend/src/components/Page/Page.js
code language-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
SPA AEM实用程序有助于根据cqPath
属性。 -
打开
Header.js
组件位于ui.frontend/src/components/Header/Header.js
. -
更新
Header
以包住<h1>
标记中 链接 转到主页:code language-diff //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 Router提供。 只要to=
指向有效路由,SPA将切换到该路由,并且 非 执行全页刷新。 在这里,我们只是硬编码指向主页的链接以说明如何使用Link
. -
更新测试于
App.test.js
在ui.frontend/src/App.test.js
.code language-diff + 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:
code language-shell $ 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路由正在运行。
-
(可选)尝试使用
Header.js
使用标准格式的文件<a>
锚点标记:code language-js <a href="/content/wknd-spa-react/us/en/home.html"> <h1>WKND</h1> </a>
这有助于说明SPA路由与常规网页链接之间的区别。
恭喜! congratulations
恭喜,您已了解如何通过使用SPA编辑器SDK映射到AEM页面来支持SPA中的多个视图。 已使用React Router实施动态导航,并将其添加到 Header
组件。