动态路由和可编辑组件

Last update: Mon Jun 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager 6.5
Experience Manager as a Cloud Service

创建对象：

初学者
开发人员

IMPORTANT

SPA 编辑器已被新项目弃用。Adobe 对现有项目仍提供支持，但不应在新项目中使用。目前，AEM 中用于管理 Headless 内容的首选编辑器是：

通用编辑器，用于可视化编辑 Headless 内容。
内容片段编辑器，用于以基于表单的方法编辑 Headless 内容。

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

动态路由和可编辑的组件

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

将SPA URL映射到AEM页面

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

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

在本教程中，我们使用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编辑器映射

通过AEM SPA编辑器打开SPA时，SPA请求的映射通过配置AEM中的“Sling映射”配置进行配置。

在AEM中创建内容页面

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

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

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

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

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

更新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，该当前页面根据上面定义的映射映射到冒险页面。
1. pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
2. itemPath = 'root/responsivegrid'
这会指示ResponsiveGrid组件从AEM资源检索其内容：
1. /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