Integración del encabezado y pie de página global de AEM en las aplicaciones de React
La integración del encabezado y pie de página global de Adobe Experience Manager (AEM) en una aplicación de React puede causar problemas de estilo y funcionalidad. La configuración predeterminada de AEM no admite aplicaciones de una sola página (SPA) de React de forma predeterminada, especialmente cuando se utilizan fragmentos de experiencias (XF). Para solucionarlo, extraiga los fragmentos de HTML adecuados y configure las reglas de Dispatcher para evitar problemas de ruta.
Descripción description
Entorno
- Producto: Adobe Experience Manager (AEM) as a Cloud Service - Sitios
- Instancia: Desarrollo
Problema/Síntomas
- El uso del componente incrustado de URL solo admite vínculos de vídeo y no permite incrustar direcciones URL de página.
- Servir el contenido del encabezado y pie de página como JSON (por ejemplo,
model.json) causa problemas de funcionalidad. Las clases nativas de AEM no funcionan correctamente y funciones como buscar y traducir no funcionan. - La arquitectura de AEM existente tiene encabezado (componentes/sightly), que no admite la implementación de SPA React para plantillas y componentes.
Resolución resolution
Para integrar el encabezado y pie de página global de AEM en la aplicación React preservando al mismo tiempo los estilos y la funcionalidad nativos, siga estos pasos:
-
Extraiga el HTML de los fragmentos de experiencias (XF) utilizando los selectores
.head.nocloudconfig.htmly.body.nocloudconfig.html. Estos selectores eliminan los datos de configuración de la nube, lo que hace que HTML sea compatible con aplicaciones externas. -
Comprueba tu
web server rewrite rules. Asegúrese de que no adjunten rutas no válidas antes de las direcciones URL del fragmento de experiencia. Por ejemplo, asegúrese de que rutas como/content/<my_project>/content/experience-fragments/...estén configuradas correctamente para evitar errores de 404. -
Si tiene problemas para acceder a los fragmentos de experiencias:
- Revise los registros de AEM para ver si hay errores o cambios relacionados con las rutas.
- Actualice las reglas de Dispatcher para dejar de agregar prefijos innecesarios a las rutas de Fragmento de experiencia.
Lectura relacionada
- Uso de fragmentos de experiencias en tutoriales de AEM Sites
- Implementaciones de SPA sin encabezado de AEM en el tutorial sin encabezado de AEM