動態路由和可編輯的元件

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

適用對象：
Experience Manager 6.5
Experience Manager as a Cloud Service

主題：
核心組件
API
開發

建立對象：

初學者
開發人員

IMPORTANT

新專案中已棄用 SPA 編輯器。Adobe 仍支援現有專案使用此編輯器，但不應用於新專案。目前，AEM 中用於管理 Headless 內容的首選編輯器為：

通用編輯器：用於視覺化編輯 Headless 內容。
內容片段編輯器：用於 Headless 內容的表單型編輯。

在本章中，我們啟用兩個動態冒險詳細資訊路徑來支援可編輯的元件；Bali Surf Camp和波特蘭的Beervana。

動態路由和可編輯的元件

冒險詳細資料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對應

離開遠端SPA之要求的對應是透過Bootstrap 中完成的setupProxy設定所設定。

SPA編輯器對應

透過AEM SPA Editor開啟SPA時，SPA要求的對應是透過設定AEM中完成的Sling對應設定所設定。

在AEM中建立內容頁面

首先，建立中介adventure頁面區段：

登入AEM Author
導覽至網站> WKND應用程式>我們>英文> WKND應用程式首頁
1. 此AEM頁面對應為SPA的根，因此我們在這裡開始為其他SPA路由建置AEM頁面結構。
點選建立並選取頁面
選取 遠端SPA頁面 範本，然後點選下一步
填寫頁面屬性
1. 標題：冒險
2. 名稱：adventure
  1. 此值會定義AEM頁面的URL，因此必須符合SPA的路由區段。
點選完成

然後，建立與需要可編輯區域的每個SPA URL相對應的AEM頁面。

在網站管理員中導覽至新的 Adventure 頁面
點選建立並選取頁面
選取 遠端SPA頁面 範本，然後點選下一步
填寫頁面屬性
1. 標題：巴厘島衝浪營
2. 名稱：bali-surf-camp
  1. 此值會定義AEM頁面的URL，因此必須符合SPA路由的最後一個區段
點選完成
重複步驟3-6以在Portland 中建立 Beervana頁面，包含：
1. 標題：波特蘭的Beervana
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