动态路由和可编辑组件

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

初学者
开发人员

在本章中，我们启用两个动态冒险详细信息路线来支持可编辑的组件：Bali Surf Camp 和 Beervana in Portland。

动态路由和可编辑的组件

冒险详细信息SPA路由定义为/adventure/:slug，其中slug是冒险内容片段上的唯一标识符属性。

将SPA URL映射到AEM页面

在前两章中，我们已将可编辑的组件内容从SPA主页视图映射到AEM中位于/content/wknd-app/us/en/的相应远程SPA根页面。

为SPA动态路由的可编辑组件定义映射类似，但我们必须制定路由实例与AEM页面之间的一对一映射方案。

在本教程中，我们使用WKND冒险内容片段的名称（该路径的最后一个区段），并将其映射到/content/wknd-app/us/en/adventure下的简单路径。

远程SPA路由

AEM页面路径

/content/wknd-app/us/en/home

/adventure/bali-surf-camp

/content/wknd-app/us/en/home/adventure/bali-surf-camp

/adventure/beervana-portland

/content/wknd-app/us/en/home/adventure/beervana-in-portland

因此，基于此映射，我们必须在以下位置创建两个新的AEM页面：

/content/wknd-app/us/en/home/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/beervana-in-portland

远程SPA映射

通过BootstrapSPA中的setupProxy配置配置了离开远程SPA的请求的映射。

SPA编辑器映射

通过SPA SPA Editor打开SPA时AEM请求的映射通过配置AEM中完成的Sling映射配置进行配置。

在AEM中创建内容页面

首先，创建中间adventure页面区段：

登录AEM Author
导航到 Sites > WKND应用程序>我们> en > WKND应用程序主页
- 此AEM页面被映射为SPA的根，因此我们将在此处开始为其他SPA路由构建AEM页面结构。
点按创建并选择页面
选择 远程SPA页面 模板，然后点按 下一步
填写页面属性
- 标题：冒险
- 名称：adventure
  - 此值定义AEM页面的URL，因此必须匹配SPA的路由段。
点按完成

然后，创建与每个需要可编辑区域的SPA URL相对应的AEM页面。

在网站管理员中导航到新的冒险页面
点按创建并选择页面
选择 远程SPA页面 模板，然后点按 下一步
填写页面属性
- 标题：巴厘岛冲浪营
- 名称：bali-surf-camp
  - 此值定义AEM页面的URL，因此必须匹配SPA路由的最后一个区段
点按完成
重复步骤3-6以在Portland 中创建 Beervana页面，其中：
- 标题：波特兰的贝尔瓦纳
- 名称：beervana-in-portland
  - 此值定义AEM页面的URL，因此必须匹配SPA路由的最后一个区段

这两个AEM页包含其匹配的SPA路由的各自编写的内容。如果其他SPA路由需要创作，则必须在AEM中远程AEM页面的根页面(/content/wknd-app/us/en/home)下的其SPA URL上创建新的SPA页面。

更新WKND应用程序

让我们将在最后一章中创建的<ResponsiveGrid...>组件放置到AdventureDetail SPA组件中，创建一个可编辑的容器。

放置ResponsiveGrid SPA组件

将<ResponsiveGrid...>放置到AdventureDetail组件中会在该路由中创建可编辑的容器。关键在于，由于多个路由使用AdventureDetail组件进行渲染，因此我们必须动态调整<ResponsiveGrid...>'s pagePath属性。必须派生pagePath以根据路由实例显示的冒险指向相应的AEM页面。

打开并编辑react-app-/src/components/AdventureDetail.js
导入ResponsiveGrid组件并将其放在<h2>Itinerary</h2>组件上方。
在<ResponsiveGrid...>组件上设置以下属性。请注意，pagePath属性添加当前slug，该当前页面根据上面定义的映射映射到冒险页面。
- pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
- itemPath = 'root/responsivegrid'
这会指示ResponsiveGrid组件从AEM资源检索其内容：
- /content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid

使用以下行更新AdventureDetail.js：

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

AdventureDetail.js文件应如下所示：

AdventureDetail.js