Integrera AEM globala sidhuvud och sidfot i React-appar
Om du integrerar Adobe Experience Manager (AEM) globala sidhuvud och sidfot i ett React-program kan det orsaka problem med format och funktionalitet. AEM-standardinställningen stöder inte SPA-program (React single page applications) som medföljer, särskilt inte när Experience Fragments används. Åtgärda detta genom att dra rätt HTML-fragment och konfigurera dispatcherregler för att undvika sökvägsproblem.
Beskrivning description
Miljö
- Produkt: Adobe Experience Manager (AEM) as a Cloud Service - Webbplatser
- Instans: Utveckling
Problem/symtom
- Om du använder URL-inbäddningskomponenten stöds bara videolänkar och det går inte att bädda in sidans URL-adresser.
- Om sidhuvuds- och sidfotsinnehållet hanteras som JSON (till exempel
model.json) uppstår funktionsproblem. AEM-inbyggda klasser fungerar inte som de ska, och funktioner som sökning och översättning fungerar inte. - Den befintliga AEM-arkitekturen är avancerad (komponenter/synta), som inte stöder SPA React-implementering för mallar och komponenter.
Upplösning resolution
Följ de här stegen för att integrera AEM globala sidhuvud och sidfot i React-programmet samtidigt som du behåller de format och funktioner som finns i programmet:
-
Dra HTML för Experience Fragments (XF) med väljarna
.head.nocloudconfig.htmloch.body.nocloudconfig.html. Dessa väljare tar bort molnkonfigurationsdata, vilket gör HTML kompatibelt med externa appar. -
Kontrollera din
web server rewrite rules. Se till att de inte lägger till ogiltiga sökvägar före Experience Fragment-URL:erna. Kontrollera till exempel att sökvägar som/content/<my_project>/content/experience-fragments/...är korrekt konfigurerade för att undvika 404 -fel. -
Om du stöter på problem med att komma åt Experience Fragments:
- Se AEM loggar för sökvägsrelaterade fel eller ändringar.
- Uppdatera dispatcherregler för att sluta lägga till onödiga prefix i Experience Fragment-sökvägar.
Relaterad läsning
- Använda Experience Fragments i AEM Sites-självstudier
- AEM Headless SPA-distributioner i AEM Headless Tutorial