Aggiungi navigazione e indirizzamento navigation-routing

Apri un browser e accedi a AEM, http://localhost:4502/. La base di codice iniziale deve essere già distribuita.

Passa al modello pagina SPA: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

Seleziona il contenitore di layout principale più esterno e fai clic sulla relativa icona Criteri. Fai attenzione a not per selezionare il Contenitore di layout non bloccato per l'authoring.

Crea un nuovo criterio denominato Struttura SPA:

In Componenti consentiti > Generale > seleziona il componente Contenitore di layout.

In Componenti consentiti > WKND SPA REACT - STRUCTURE > selezionare il componente Navigation:

In Componenti consentiti > WKND SPA REACT - Contenuto > selezionare i componenti Immagine e Testo. Dovresti aver selezionato 4 componenti totali.

Per salvare le modifiche, fai clic su Completati.

Aggiorna la pagina e aggiungi il componente Navigazione sopra il Contenitore di layout non bloccato:

Selezionare il componente Navigazione e fare clic sulla relativa icona Criteri per modificare i criteri.

Crea un nuovo criterio con Titolo criterio di Navigazione SPA.

In Proprietà:

• Impostare Directory principale di navigazione su /content/wknd-spa-react/us/en.
• Imposta Escludi livelli principali su 1.
• Deseleziona Raccogli tutte le pagine figlie.
• Impostare Annidamento struttura di spostamento su 3.

In questo modo verranno raccolti i 2 livelli di navigazione inferiori a /content/wknd-spa-react/us/en.

Dopo aver salvato le modifiche, dovresti visualizzare Navigation popolato come parte del modello:

Passare alla console Sites: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Seleziona la home page WKND SPA React e fai clic su Crea > Pagina:

In Modello selezionare Pagina SPA. In Proprietà immettere Pagina 1 per il Titolo e Pagina-1 come nome.

Fai clic su Crea e nella finestra a comparsa fai clic su Apri per aprire la pagina nell'editor SPA dell'AEM.

Aggiungi un nuovo componente Testo al Contenitore di layout principale. Modificare il componente e immettere il testo: Pagina 1 utilizzando l'editor Rich Text e l'elemento H2.

Puoi aggiungere altri contenuti, come un’immagine.

Torna alla console AEM Sites e ripeti i passaggi precedenti, creando una seconda pagina denominata Pagina 2 di pari livello di Pagina 1.

Infine, crea una terza pagina, Pagina 3 ma come pagina secondaria di Pagina 2. Una volta completato, la gerarchia del sito avrà l’aspetto seguente:

Il componente Navigazione può ora essere utilizzato per navigare in diverse aree dell’SPA.

Apri la pagina all'esterno dell'editor AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Utilizza il componente Navigazione per passare a visualizzazioni diverse dell'app.

Utilizza gli strumenti di sviluppo del browser per verificare le richieste di rete durante la navigazione. Le schermate seguenti vengono acquisite dal browser Google Chrome.

Dopo il caricamento della pagina iniziale, la navigazione successiva non provocherà un aggiornamento dell’intera pagina e il traffico di rete verrà ridotto al minimo quando si tornerà alle pagine visitate in precedenza.

In una nuova scheda, apri l'API del modello JSON fornita dall'AEM: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Potrebbe essere utile utilizzare un'estensione del browser per formattare il JSON.

Questo contenuto JSON viene richiesto al primo caricamento dell’SPA. La struttura esterna si presenta come segue:

{
"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": {}
   }
}

In :children dovresti visualizzare una voce per ciascuna delle pagine create. Il contenuto di tutte le pagine si trova in questa richiesta JSON iniziale. Con il routing di navigazione, le visualizzazioni successive dell’SPA vengono caricate rapidamente, in quanto il contenuto è già disponibile lato client.

Non è consigliabile caricare ALL del contenuto di un SPA nella richiesta JSON iniziale, in quanto ciò rallenterebbe il caricamento della pagina iniziale. Quindi, vediamo come viene raccolta la profondità della gerarchia delle pagine.

Passa al modello Radice SPA in: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

Fai clic sul menu Proprietà pagina > Criterio pagina:

Il modello Radice SPA include una scheda Struttura gerarchica aggiuntiva per controllare il contenuto JSON raccolto. L'Annidamento struttura determina la profondità nella gerarchia del sito per raccogliere le pagine figlie sotto la radice. È inoltre possibile utilizzare il campo Modelli struttura per filtrare ulteriori pagine in base a un'espressione regolare.

Aggiorna Annidamento struttura in 2:

Fai clic su Fine per salvare le modifiche al criterio.

Riapri il modello 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": {}
   }
}

Il percorso Pagina 3 è stato rimosso: /content/wknd-spa-react/us/en/home/page-2/page-3 dal modello JSON iniziale. Questo perché La pagina 3 si trova al livello 3 nella gerarchia e il criterio è stato aggiornato in modo da includere solo il contenuto con una profondità massima del livello 2.

Riapri la home page dell'SPA: http://localhost:4502/content/wknd-spa-react/us/en/home.html e apri gli strumenti per sviluppatori del browser.

Aggiorna la pagina per visualizzare la richiesta XHR a /content/wknd-spa-react/us/en.model.json, che è la radice SPA. Tieni presente che solo tre pagine figlie sono incluse in base alla configurazione della profondità della gerarchia rispetto al modello radice SPA creato in precedenza nell’esercitazione. Non include Pagina 3.

Con gli strumenti per sviluppatori aperti, utilizzare il componente Navigation per passare direttamente a Pagina 3:

Si noti che è stata effettuata una nuova richiesta XHR a: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

Il Model Manager AEM è consapevole che il contenuto JSON Page 3 non è disponibile e attiva automaticamente la richiesta XHR aggiuntiva.

Prova i collegamenti profondi navigando direttamente in: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Inoltre, il pulsante Indietro del browser continua a funzionare.

Nell'IDE aprire il file index.js in 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')
    );
});

Si noti che App è racchiuso nel componente Router da React Router. ModelManager, fornito dall'SDK JS dell'editor SPA dell'AEM, aggiunge le route dinamiche alle pagine AEM in base all'API del modello JSON.

Apri il file Page.js in 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))
);

Il componente SPA Page utilizza la funzione MapTo per mappare Pagine nell'AEM a un componente SPA corrispondente. L'utilità withRoute consente di indirizzare dinamicamente l'SPA alla pagina secondaria AEM appropriata in base alla proprietà cqPath.

Apri il componente Header.js in ui.frontend/src/components/Header/Header.js.

Aggiorna Header per racchiudere il tag <h1> in un collegamento nella home page:

  //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>
        );
    }

Invece di utilizzare un tag di ancoraggio predefinito <a>, utilizziamo <Link> fornito da React Router. Se to= punta a una route valida, l'SPA passerà a tale route e non eseguirà un aggiornamento dell'intera pagina. In questo caso è sufficiente inserire il collegamento alla home page come codice fisso per illustrare l'utilizzo di Link.

Aggiorna il test alle App.test.js alle 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);
  });

Poiché si stanno utilizzando le funzionalità di React Router all'interno di un componente statico a cui si fa riferimento in App.js, è necessario aggiornare lo unit test per tenerne conto.

Apri un terminale, individua la directory principale del progetto e implementa il progetto in AEM con le tue competenze Maven:

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

Passare a una delle pagine dell'SPA nell'AEM: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Anziché utilizzare il componente Navigation per spostarsi, utilizzare il collegamento in Header.

Tieni presente che l'aggiornamento dell'intera pagina è non attivato e che il routing SPA funziona.

Facoltativamente, provare con il file Header.js utilizzando un tag di ancoraggio <a> standard:

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

Questo può aiutare a illustrare la differenza tra il routing dell’SPA e i normali collegamenti alle pagine web.