Aggiungi navigazione e indirizzamento navigation-routing

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

Accedi a Modello pagina SPA: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

Seleziona il più esterno Contenitore di layout principale e fai clic sul relativo Policy icona. Stai attento non per selezionare Contenitore di layout non bloccato per l’authoring.

Crea un nuovo criterio denominato Struttura dell’SPA:

Sotto Componenti consentiti > Generale > seleziona la Contenitore di layout componente.

Sotto Componenti consentiti > WKND SPA REACT - STRUTTURA > seleziona la Navigazione componente:

Sotto Componenti consentiti > WKND SPA REACT - Contenuto > seleziona la Immagine e Testo componenti. Dovresti aver selezionato 4 componenti totali.

Per salvare le modifiche, fai clic su Completati.

Aggiorna la pagina e aggiungi Navigazione componente sopra lo sbloccato Contenitore di layout:

Seleziona la Navigazione e fare clic sul relativo Policy per modificare il criterio.

Creare un nuovo criterio con un Titolo criterio di Navigazione SPA.

Sotto Proprietà:

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

Questo raccoglierà la navigazione 2 livelli più in basso /content/wknd-spa-react/us/en.

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

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

Sotto Modello seleziona Pagina SPA. Sotto Proprietà Invio Pagina 1 per Titolo e page-1 come nome.

Clic Crea e nella finestra a comparsa, fai clic su Apri per aprire la pagina nell’Editor SPA dell’AEM.

Aggiungi un nuovo Testo Componente principale Contenitore di layout. Modifica il componente e immetti il testo: Pagina 1 utilizzando l’editor Rich Text e H2 elemento.

Puoi aggiungere altri contenuti, come un’immagine.

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

Infine, crea una terza pagina. Pagina 3 ma come secondario 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 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. Può 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": {}
   }
}

Sotto :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 è saggio caricare TUTTI 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.

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

Fai clic su Menu delle proprietà della pagina > Criterio pagina:

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

Aggiornare il Annidamento struttura a 2:

Clic Fine per salvare le modifiche apportate 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": {}
   }
}

Tieni presente che Pagina 3 percorso rimosso: /content/wknd-spa-react/us/en/home/page-2/page-3 dal modello JSON iniziale. Questo perché Pagina 3 è al livello 3 nella gerarchia e abbiamo aggiornato la policy per includere solo contenuti a una profondità massima di 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 dell'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. Questo non include Pagina 3.

Con gli strumenti per sviluppatori aperti, utilizza Navigation componente a cui passare direttamente Pagina 3:

Osserva che viene effettuata una nuova richiesta XHR per: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

Il Model Manager dell'AEM è consapevole che Pagina 3 Il contenuto JSON 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 apri il file index.js a 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')
    );
});

Tieni presente che App è racchiuso in Router componente da Router React. Il ModelManager, fornito dall’SDK JS per l’editor SPA dell’AEM, aggiunge le route dinamiche alle pagine AEM in base all’API del modello JSON.

Apri il file Page.js a 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 Page La componente SPA utilizza MapTo funzione da mappare Pagine in AEM ad una corrispondente componente dell’SPA. Il withRoute consente di indirizzare dinamicamente l’SPA alla pagina AEM-figlio appropriata in base al cqPath proprietà.

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

Aggiornare il Header per racchiudere <h1> tag in una Collegamento alla 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 valore predefinito <a> tag di ancoraggio utilizzato <Link> fornito da React Router. Purché to= punti a un percorso valido, l'SPA vi passerà e non esegui un aggiornamento dell’intera pagina. Qui semplicemente inseriamo un codice rigido per il collegamento alla home page per illustrare l’utilizzo di Link.

Aggiorna il test in App.test.js a 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é stiamo utilizzando le funzioni 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

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

Invece di utilizzare Navigation per navigare, utilizza il collegamento nella sezione Header.

Osserva che un aggiornamento dell’intera pagina è non e che il routing dell’SPA funzioni.

Facoltativamente, prova con Header.js file utilizzando uno standard <a> tag di ancoraggio:

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