Integrar o cabeçalho e o rodapé globais do AEM nos aplicativos React
Integrar o cabeçalho e o rodapé globais do Adobe Experience Manager (AEM) em um aplicativo React pode causar problemas de estilo e funcionalidade. A configuração padrão do AEM não é compatível com aplicativos de página única (SPAs) do React imediatamente, especialmente ao usar Fragmentos de experiência (XFs). Para corrigir isso, extraia os fragmentos corretos do HTML e configure as regras do dispatcher para evitar problemas de caminho.
Descrição description
Ambiente
- Produto: Adobe Experience Manager (AEM) as a Cloud Service - Sites
- Instância: Desenvolvimento
Problema/Sintomas
- O uso do componente de incorporação de URL só é compatível com links de vídeo e não permite a incorporação de URLs de página.
- Fornecer conteúdo de cabeçalho e rodapé como JSON (por exemplo,
model.json) causa problemas de funcionalidade. As classes nativas do AEM não funcionam corretamente e recursos como pesquisa e tradução não são funcionais. - A arquitetura existente do AEM é headful (componentes/sightly), que não oferece suporte à implementação SPA React para modelos e componentes.
Resolução resolution
Para integrar o cabeçalho e o rodapé globais do AEM no aplicativo React, preservando ao mesmo tempo os estilos e a funcionalidade nativos, siga estas etapas:
-
Puxe a HTML dos Fragmentos de experiência (XFs) usando os seletores
.head.nocloudconfig.htmle.body.nocloudconfig.html. Esses seletores removem os dados de configuração da nuvem, tornando o HTML compatível com aplicativos externos. -
Verifique seu
web server rewrite rules. Certifique-se de que eles não anexem caminhos inválidos antes dos URLs do fragmento de experiência. Por exemplo, verifique se caminhos como/content/<my_project>/content/experience-fragments/...estão configurados corretamente para evitar erros de 404. -
Se você tiver problemas ao acessar os Fragmentos de experiência:
- Revise os logs do AEM para ver se há erros ou alterações relacionados a caminhos.
- Atualize as regras do Dispatcher para interromper a adição de prefixos desnecessários aos caminhos do Fragmento de experiência.
Leitura relacionada
- Usando Fragmentos de Experiência em Tutoriais do AEM Sites
- Implantações de SPA do AEM Headless no tutorial do AEM Headless