Adicionar navegação e roteamento

Saiba como várias exibições no SPA podem ser compatíveis com o mapeamento para AEM páginas com o SDK do Editor SPA. A navegação dinâmica é implementada usando o React Router e React Core Components.

Objetivo

  1. Entenda as opções de roteamento do modelo de SPA disponíveis ao usar o Editor de SPA.
  2. Saiba como usar o React Router para navegar entre diferentes visualizações do SPA.
  3. Use AEM React Core Components para implementar uma navegação dinâmica orientada pela hierarquia de páginas AEM.

O que você vai criar

Este capítulo adicionará navegação a um SPA em AEM. O menu de navegação será orientado pela hierarquia de página de AEM e usará o modelo JSON fornecido pelo Componente principal de navegação.

Navegação adicionada

Pré-requisitos

Revise as ferramentas e instruções necessárias para configurar um ambiente de desenvolvimento local. Este capítulo é uma continuação do capítulo Mapear componentes. No entanto, para seguir em frente, tudo o que você precisa é de um projeto AEM habilitado para SPA implantado em uma instância de AEM local.

Adicionar a navegação ao modelo

  1. Abra um navegador e faça logon no AEM, http://localhost:4502/. A base de código inicial já deve ser implantada.

  2. Navegue até SPA Modelo de Página: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

  3. Selecione o Contêiner de layout raiz mais externo e clique no ícone Política. Tenha cuidado e não para selecionar o Contêiner de layout desbloqueado para criação.

    Selecione o ícone de política do contêiner de layout de raiz

  4. Crie uma nova política chamada Estrutura SPA:

    Política de Estrutura SPA

    Em Componentes permitidos > Geral > selecione o componente Contêiner de layout.

    Em Componentes permitidos > WKND SPA REACT - ESTRUTURA > selecione o componente Navegação:

    Selecionar componente Navegação

    Em Componentes permitidos > WKND SPA REACT - Content > selecione os componentes Image e Text. Você deve ter quatro componentes totais selecionados.

    Clique em Concluído para salvar as alterações.

  5. Atualize a página e adicione o componente Navigation acima do Contêiner de layout desbloqueado:

    adicionar componente Navegação ao modelo

  6. Selecione o componente Navegação e clique no ícone Política para editar a política.

  7. Crie uma nova política com um Título da Política de SPA Navegação.

    Em Propriedades:

    • Defina Raiz de navegação para /content/wknd-spa-react/us/en.
    • Defina Excluir níveis de raiz para 1.
    • Desmarque Coletar todas as páginas secundárias.
    • Defina Profundidade da estrutura de navegação para 3.

    Configurar política de navegação

    Isso coletará os 2 níveis de navegação abaixo de /content/wknd-spa-react/us/en.

  8. Depois de salvar suas alterações, você deve ver o Navigation preenchido como parte do modelo:

    Componente de navegação preenchido

Criar páginas filhas

Em seguida, crie páginas adicionais no AEM que servirão como visualizações diferentes no SPA. Inspecionaremos também a estrutura hierárquica do modelo JSON fornecido pelo AEM.

  1. Navegue até o console Sites: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Selecione WKND SPA React Home Page e clique em Create > Page:

    Criar nova página

  2. Em Modelo selecione SPA Página. Em Properties digite Page 1 para o Title e page-1 como o nome.

    Insira as propriedades da página inicial

    Clique em Criar e, na janela pop-up, clique em Abrir para abrir a página no Editor de SPA de AEM.

  3. Adicione um novo componente Text ao Contêiner de layout principal. Edite o componente e insira o texto: Página 1 usando o RTE e o elemento H2.

    Exemplo de página de conteúdo 1

    Você pode adicionar conteúdo adicional, como uma imagem.

  4. Retorne ao console do AEM Sites e repita as etapas acima, criando uma segunda página chamada Page 2 como um irmão de Page 1.

  5. Por fim, crie uma terceira página, Page 3, mas como child de Page 2. Depois de concluída, a hierarquia do site deve ser semelhante ao seguinte:

    Hierarquia de site de exemplo

  6. O componente Navegação agora pode ser usado para navegar para áreas diferentes do SPA.

    Navegação e encaminhamento

  7. Abra a página fora do Editor de AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Use o componente Navegação para navegar até diferentes exibições do aplicativo.

  8. Use as ferramentas de desenvolvedor do seu navegador para inspecionar as solicitações de rede, conforme você navega. As capturas de tela abaixo são capturadas pelo navegador Google Chrome.

    Observe solicitações de rede

    Observe que, após o carregamento da página inicial, a navegação subsequente não causa uma atualização de página completa e que o tráfego de rede é minimizado ao retornar às páginas visitadas anteriormente.

Modelo JSON de página de hierarquia

Em seguida, inspecione o Modelo JSON que orienta a experiência de várias visualizações do SPA.

  1. Em uma nova guia, abra a API do modelo JSON fornecida pelo AEM: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Pode ser útil usar uma extensão de navegador para formatar o JSON.

    Esse conteúdo JSON é solicitado quando o SPA é carregado pela primeira vez. A estrutura externa tem a seguinte aparência:

    {
    "language": "en",
    "title": "en",
    "templateName": "spa-app-template",
    "designPath": "/libs/settings/wcm/designs/default",
    "cssClassNames": "spa page basicpage",
    ":type": "wknd-spa-react/components/spa",
    ":items": {},
    ":itemsOrder": [],
    ":hierarchyType": "page",
    ":path": "/content/wknd-spa-react/us/en",
    ":children": {
       "/content/wknd-spa-react/us/en/home": {},
       "/content/wknd-spa-react/us/en/home/page-1": {},
       "/content/wknd-spa-react/us/en/home/page-2": {},
       "/content/wknd-spa-react/us/en/home/page-2/page-3": {}
       }
    }
    

    Em :children você deve ver uma entrada para cada uma das páginas criadas. O conteúdo de todas as páginas está nesta solicitação JSON inicial. Com o roteamento de navegação, as exibições subsequentes do SPA serão carregadas rapidamente, já que o conteúdo já está disponível no lado do cliente.

    Não é recomendável carregar ALL do conteúdo de um SPA na solicitação JSON inicial, pois isso atrasaria o carregamento da página inicial. Em seguida, vamos examinar como a profundidade da hierarquia de páginas é coletada.

  2. Navegue até o modelo Raiz SPA em: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

    Clique no menu Propriedades da página > Política da página:

    Abra a política de página para SPA raiz

  3. O modelo SPA Root tem uma guia Hierarchical Structure extra para controlar o conteúdo JSON coletado. A Profundidade da estrutura determina o quão profundo na hierarquia do site é coletar páginas secundárias abaixo de root. Também é possível usar o campo Structure Patterns para filtrar páginas adicionais com base em uma expressão regular.

    Atualize a Profundidade da estrutura para 2:

    Atualizar profundidade da estrutura

    Clique em Concluído para salvar as alterações na política.

  4. Abra novamente o modelo JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json.

    {
    "language": "en",
    "title": "en",
    "templateName": "spa-app-template",
    "designPath": "/libs/settings/wcm/designs/default",
    "cssClassNames": "spa page basicpage",
    ":type": "wknd-spa-react/components/spa",
    ":items": {},
    ":itemsOrder": [],
    ":hierarchyType": "page",
    ":path": "/content/wknd-spa-react/us/en",
    ":children": {
       "/content/wknd-spa-react/us/en/home": {},
       "/content/wknd-spa-react/us/en/home/page-1": {},
       "/content/wknd-spa-react/us/en/home/page-2": {}
       }
    }
    

    Observe que o caminho Page 3 foi removido: /content/wknd-spa-react/us/en/home/page-2/page-3 do modelo JSON inicial. Isso ocorre porque a Página 3 está no nível 3 na hierarquia e atualizamos a política para incluir apenas conteúdo em uma profundidade máxima de nível 2.

  5. Reabra a página inicial do SPA: http://localhost:4502/content/wknd-spa-react/us/en/home.html e abra as ferramentas de desenvolvedor do seu navegador.

    Atualize a página e você deve ver a solicitação XHR para /content/wknd-spa-react/us/en.model.json, que é a Raiz SPA. Observe que apenas três páginas filhas são incluídas com base na configuração de profundidade da hierarquia para o modelo Raiz SPA feito anteriormente no tutorial. Isso não inclui Página 3.

    Solicitação JSON inicial - Raiz SPA

  6. Com as ferramentas do desenvolvedor abertas, use o componente Navigation para navegar diretamente para Página 3:

    Observe que uma nova solicitação de XHR é feita para: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

    Página três Solicitação XHR

    O Gerenciador de modelos de AEM entende que o conteúdo JSON da Página 3 não está disponível e aciona automaticamente a solicitação XHR adicional.

  7. Experimente com deep links navegando diretamente para: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Observe também que o botão Voltar do navegador continua funcionando.

Roteamento do Inspect React

A navegação e o roteamento são implementados com React Router. O React Router é uma coleção de componentes de navegação para aplicativos React. AEM Componentes principais do React usam os recursos do React Router para implementar o componente ​de Navegação usado nas etapas anteriores.

Em seguida, verifique como o React Router é integrado ao SPA e experimente usando o componente Link do React Router.

  1. No IDE, abra o arquivo index.js em ui.frontend/src/index.js.

    /* index.js */
    import { Router } from 'react-router-dom';
    ...
    ...
     ModelManager.initialize().then(pageModel => {
        const history = createBrowserHistory();
        render(
        <Router history={history}>
            <App
            history={history}
            cqChildren={pageModel[Constants.CHILDREN_PROP]}
            cqItems={pageModel[Constants.ITEMS_PROP]}
            cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
            cqPath={pageModel[Constants.PATH_PROP]}
            locationPathname={window.location.pathname}
            />
        </Router>,
        document.getElementById('spa-root')
        );
    });
    

    Observe que App está envolvido no componente Router de React Router. O ModelManager, fornecido pelo SDK JS do Editor de SPA AEM, adiciona as rotas dinâmicas às Páginas de AEM com base na API do modelo JSON.

  2. Abra o arquivo Page.js em ui.frontend/src/components/Page/Page.js

    class AppPage extends Page {
      get containerProps() {
        let attrs = super.containerProps;
        attrs.className =
          (attrs.className || '') + ' page ' + (this.props.cssClassNames || '');
        return attrs;
      }
    }
    
    export default MapTo('wknd-spa-react/components/page')(
      withComponentMappingContext(withRoute(AppPage))
    );
    

    O componente de SPA Page usa a função MapTo para mapear Páginas em AEM para um componente de SPA correspondente. O utilitário withRoute ajuda a rotear dinamicamente o SPA para a página AEM filho apropriada com base na propriedade cqPath.

  3. Abra o componente Header.js em ui.frontend/src/components/Header/Header.js.

  4. Atualize o Header para envolver a tag <h1> em um Link na página inicial:

      //Header.js
      import React, {Component} from 'react';
    + import {Link} from 'react-router-dom';
      require('./Header.css');
    
    export default class Header extends Component {
    
        render() {
            return (
                <header className="Header">
                <div className="Header-container">
    +              <Link to="/content/wknd-spa-react/us/en/home.html">
                        <h1>WKND</h1>
    +              </Link>
                </div>
                </header>
            );
        }
    

    Em vez de usar uma tag de âncora <a> padrão, usamos <Link> fornecida pelo React Router. Desde que to= aponte para uma rota válida, o SPA mudará para essa rota e não executará uma atualização de página completa. Aqui, simplesmente codificamos o link para a página inicial para ilustrar o uso de Link.

  5. Atualize o teste em App.test.js em ui.frontend/src/App.test.js.

    + import { BrowserRouter as Router } from 'react-router-dom';
      import App from './App';
    
      it('renders without crashing', () => {
        const div = document.createElement('div');
    -   ReactDOM.render(<App />, div);
    +   ReactDOM.render(<Router><App /></Router>, div);
      });
    

    Como estamos usando recursos do React Router em um componente estático referenciado em App.js, precisamos atualizar o teste de unidade para considerá-lo.

  6. Abra um terminal, navegue até a raiz do projeto e implante o projeto para AEM usando suas habilidades Maven:

    $ cd aem-guides-wknd-spa.react
    $ mvn clean install -PautoInstallSinglePackage
    
  7. Navegue até uma das páginas no SPA no AEM: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

    Em vez de usar o componente Navigation para navegar, use o link no Header.

    Link de cabeçalho

    Observe que uma atualização de página completa é not acionada e que o roteamento de SPA está funcionando.

  8. Outra opção é experimentar o arquivo Header.js usando uma tag de âncora padrão <a>:

    <a href="/content/wknd-spa-react/us/en/home.html">
        <h1>WKND</h1>
    </a>
    

    Isso pode ajudar a ilustrar a diferença entre SPA roteamento e links regulares de página da Web.

Parabéns!

Parabéns, você aprendeu como várias exibições no SPA podem ser suportadas com o mapeamento para AEM páginas com o SDK do Editor SPA. A navegação dinâmica foi implementada usando o Roteador React e adicionada ao componente Header.

Nesta página