Adicionar navegação e roteamento navigation-routing

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

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

Selecione o Contêiner de Layout Raiz mais externo e clique em seu ícone Política. Tenha cuidado não para selecionar o Contêiner de layout desbloqueado para criação.

Crie uma nova política chamada Estrutura SPA:

Em Componentes Permitidos > Geral > selecione o componente Contêiner de Layout.

Em Componentes Permitidos > WKND SPA REACT - STRUCTURE > selecione o componente Navigation:

Em Componentes Permitidos > WKND SPA REACT - Conteúdo > selecione os componentes Imagem e Texto. Você deve ter um total de quatro componentes selecionados.

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

Atualize a página e adicione o componente Navegação acima do Contêiner de Layout desbloqueado:

Selecione o componente de Navegação e clique em seu ícone de Política para editar a política.

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

Em Propriedades:

• Defina a Raiz de Navegação como /content/wknd-spa-react/us/en.
• Defina os Excluir Níveis de Raiz para 1.
• Desmarcar Coletar todas as páginas secundárias.
• Defina a Profundidade da Estrutura de Navegação como 3.

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

Depois de salvar as alterações, você deverá ver o Navigation preenchido como parte do modelo:

Navegue até o console Sites: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Selecione a Página Inicial do WKND SPA e clique em Criar > Página:

Em Modelo, selecione Página SPA. Em Propriedades, digite Página 1 para o Título e a página-1 como o nome.

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

Adicionar um novo componente Texto ao Contêiner de Layout principal. Edite o componente e insira o texto: Página 1 usando o RTE e o elemento H2.

Fique à vontade para adicionar mais conteúdo, como uma imagem.

Retorne ao console do AEM Sites e repita as etapas acima, criando uma segunda página denominada Página 2 como irmã da Página 1.

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

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

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

Use as ferramentas de desenvolvedor do seu navegador para inspecionar as solicitações de rede enquanto você navega. As capturas de tela abaixo são feitas no navegador Google Chrome.

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

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 são carregadas rapidamente, já que o conteúdo já está disponível no lado do cliente.

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

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:

O modelo Raiz SPA tem uma guia Estrutura Hierárquica extra para controlar o conteúdo JSON coletado. A Profundidade da Estrutura determina a profundidade na hierarquia do site para coletar páginas secundárias abaixo da raiz. Você também pode usar o campo Padrões de estrutura para filtrar páginas adicionais com base em uma expressão regular.

Atualize a Profundidade da Estrutura para 2:

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

Reabra 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 Página 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á em um nível 3 na hierarquia e atualizamos a política para incluir conteúdo somente em uma profundidade máxima de nível 2.

Abra novamente 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ê 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 secundárias são incluídas com base na configuração de profundidade da hierarquia para o modelo Raiz SPA definido anteriormente no tutorial. Isso não inclui a Página 3.

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

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

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

Experimente os 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.

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á encapsulado no componente Router do Roteador React. O ModelManager, fornecido pelo SDK JS do Editor SPA AEM, adiciona as rotas dinâmicas para páginas AEM com base na API do modelo JSON.

Abrir 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 SPA Page usa a função MapTo para mapear Páginas no AEM para um componente SPA correspondente. O utilitário withRoute ajuda a rotear dinamicamente o SPA para a página AEM Filho apropriada com base na propriedade cqPath.

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

Atualize o Header para envolver a marca <h1> em um Link para a 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 marca de âncora <a> padrão, usamos <Link> fornecida pelo Roteador React. 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 inteira. Aqui, simplesmente codificamos o link para a página inicial para ilustrar o uso de Link.

Atualizar 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 Roteador React em um componente estático referenciado em App.js, precisamos atualizar o teste de unidade para levar em conta.

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

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

SPA Navegue até uma das páginas 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.

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

Opcionalmente, experimente o arquivo Header.js usando uma marca de âncora <a> padrão:

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

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