Navigatie en routering toevoegen navigation-routing

Open browser en login aan AEM, http://localhost:4502/. De begincodebasis zou reeds moeten worden opgesteld.

Navigeer aan het SPA Malplaatje van de Pagina: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

Selecteer de buitenste Container van de Lay-out van de Wortel en klik zijn 3} pictogram van het Beleid {. Wees voorzichtig niet om de Container van de Lay-out niet-gesloten voor creatie te selecteren.

Creeer een nieuw beleid genoemd SPA Structuur:

Onder Toegestane Componenten > Algemene > selecteer de component van de Container van de Lay-out.

Onder Toegestane Componenten > WKND SPA REACT - STRUCTUUR > selecteer de 5} component van de Navigatie {:

Onder Toegestane Componenten > WKND SPA REACT - Inhoud > selecteert het Beeld en de componenten van de Tekst. Er moeten in totaal vier componenten zijn geselecteerd.

Klik Gedaan om de veranderingen te bewaren.

Vernieuw de pagina, en voeg de component van de Navigatie boven de niet-gesloten Container van de Lay-out toe:

toe

Selecteer de component van de Navigatie en klik zijn pictogram van het Beleid om het beleid uit te geven.

Creeer een nieuw beleid met a Titel van het Beleid van SPA Navigatie.

Onder de Eigenschappen:

• Plaats de Wortel van de Navigatie aan /content/wknd-spa-react/us/en.
• Plaats de Exclude Niveaus van de Wortel aan 1.
• Uncheck verzamel alle kindpagina's.
• Plaats de Diepte van de Structuur van de Navigatie aan 3.

Hierdoor worden de navigatieniveaus 2 diep onder /content/wknd-spa-react/us/en verzameld.

Nadat u de wijzigingen hebt opgeslagen, ziet u de gevulde Navigation als onderdeel van de sjabloon:

Navigeer aan de console van Plaatsen: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Selecteer WKND SPA Reageer Homepage en klik creeer > Pagina:

Onder Malplaatje uitgezocht SPA Pagina. Onder Eigenschappen ga Pagina 1 voor Titel en pagina-1 in als naam.

in

Klik creëren en in de dialoog pop-up, klik Open om de pagina in de Redacteur van de SPA van de AEM te openen.

Voeg een nieuwe component van de Tekst {aan de belangrijkste Container van de Lay-out toe. Bewerk de component en ga de tekst in: Pagina 1 gebruikend RTE en het H2 element.

Voel u vrij om extra inhoud toe te voegen, zoals een afbeelding.

Terugkeer aan de console van AEM Sites en herhaal de bovengenoemde stappen, die tot een tweede pagina leiden genoemd Pagina 2 als sibling van Pagina 1.

Tot slot creeer een derde pagina, Pagina 3 maar als a kind van Pagina 2. Na voltooiing zou de plaatshiërarchie als het volgende moeten kijken:

De navigatiecomponent kan nu worden gebruikt om naar verschillende gebieden van de SPA te navigeren.

Open de pagina buiten de Redacteur van de AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Gebruik de component van de Navigatie om aan verschillende meningen van app te navigeren.

Gebruik de ontwikkelaarshulpmiddelen van uw browser om de netwerkverzoeken te inspecteren, aangezien u navigeert. Onderstaande screenshots worden vastgelegd vanuit de Google Chrome-browser.

waar

Let op: na het laden van de eerste pagina wordt de volledige pagina niet volledig vernieuwd en wordt het netwerkverkeer tot een minimum beperkt wanneer wordt teruggekeerd naar eerder bezochte pagina's.

In een nieuw lusje, open JSON model API die door AEM wordt verstrekt: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Het kan nuttig zijn om een browser uitbreiding aan formaat te gebruiken JSON.

Deze JSON-inhoud wordt opgevraagd wanneer de SPA voor het eerst wordt geladen. De buitenste structuur ziet er als volgt uit:

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

Onder :children ziet u een item voor elk van de gemaakte pagina's. De inhoud voor alle pagina's staat in dit eerste JSON-verzoek. Met navigatie die, worden de verdere meningen van de SPA geladen snel, aangezien de inhoud reeds beschikbare cliënt-kant is.

Het is niet wijs om ALLES van de inhoud van een SPA in het aanvankelijke JSON- verzoek te laden, aangezien dit de aanvankelijke paginading zou vertragen. Vervolgens kunt u bekijken hoe de hiërarchiediepte van pagina's wordt verzameld.

Navigeer aan het SPA van de Wortel malplaatje bij: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

Klik het menu van de eigenschappen van de Pagina > Beleid van de Pagina:

Het SPA 1} malplaatje van de Wortel {heeft een extra Hiërarchische 3} lusje van de Structuur om de verzamelde inhoud te controleren JSON. ​ ​De Diepte van de Structuur bepaalt hoe diep in de plaatshiërarchie om kindpagina's onder de wortel te verzamelen. U kunt het gebied van de Patronen van de Structuur ook gebruiken om extra pagina's uit te filtreren die op een regelmatige uitdrukking worden gebaseerd.

Werk de Diepte van de Structuur aan ​ ​bij:

Klik Gedaan om de veranderingen in het beleid te bewaren.

Open het model JSON http://localhost:4502/content/wknd-spa-react/us/en.model.jsonopnieuw.

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

Bericht dat Pagina 3 weg is verwijderd: /content/wknd-spa-react/us/en/home/page-2/page-3 van het aanvankelijke model JSON. Dit is omdat Pagina 3 op een niveau 3 in de hiërarchie is en wij het beleid hebben bijgewerkt om inhoud bij een maximumdiepte van niveau 2 slechts te omvatten.

Heropen de SPA homepage: http://localhost:4502/content/wknd-spa-react/us/en/home.htmlen open de ontwikkelaarshulpmiddelen van uw browser.

Vernieuw de pagina en u zou het XHR- verzoek aan /content/wknd-spa-react/us/en.model.json moeten zien, dat de SPAWortel is. U ziet dat er slechts drie onderliggende pagina's zijn opgenomen op basis van de configuratie van de hiërarchiediepte voor de SPA basissjabloon die eerder in de zelfstudie is gemaakt. Dit omvat niet Pagina 3.

Met de ontwikkelaarshulpmiddelen open, gebruik de Navigation component om direct aan Pagina 3 te navigeren:

Merk op dat een nieuw XHR-verzoek wordt gedaan aan: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

De AEM ModelManager begrijpt dat de pagina 3 inhoud JSON niet beschikbaar is en automatisch het extra verzoek XHR teweegbrengt.

Experimenteer met diepe verbindingen door rechtstreeks te navigeren aan: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Let ook op dat de knop Terug van de browser nog steeds werkt.

Open het bestand index.js at ui.frontend/src/index.js in de IDE.

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

Bericht dat App in de Router component van Reageer Routerverpakt is. ModelManager, verstrekt door de AEM SPA Redacteur JS SDK, voegt de dynamische routes aan AEM Pagina's toe die op JSON model API worden gebaseerd.

Open het bestand Page.js op 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))
);

De Page SPA component gebruikt de MapTo functie om Pagina's in kaart te brengen in AEM aan een overeenkomstige SPA component. Met het hulpprogramma withRoute kunt u de SPA dynamisch naar de juiste AEM onderliggende pagina routeren op basis van de eigenschap cqPath .

Open de component Header.js op ui.frontend/src/components/Header/Header.js .

Werk Header bij om de <h1> markering in a Verbindingaan de homepage te verpakken:

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

In plaats van een standaard <a> ankertag te gebruiken, gebruiken we <Link> dat wordt geleverd door React Router. Zolang to= aan een geldige route richt, zal de SPA aan die route schakelen en ​ ​voert geen volledige pagina uit vernieuwt. Hier kunt u de koppeling naar de startpagina eenvoudig coderen om het gebruik van Link te illustreren.

Werk de test bij App.test.js om 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);
  });

Aangezien wij eigenschappen van React Router binnen een statische component gebruiken die in App.js van verwijzingen wordt voorzien, moeten wij de eenheidstest aan rekening voor het bijwerken.

Open een terminal, navigeer aan de wortel van het project, en stel het project in om het gebruiken van uw Geweven vaardigheden te AEM:

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

Navigeer aan één van de pagina's in de SPA in AEM: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Gebruik de koppeling in Header in plaats van de component Navigation te gebruiken om te navigeren.

Merk op dat een volledige pagina niet getriggerd is en dat het SPA verpletteren werkt.

Experimenteer desgewenst met het Header.js -bestand met een standaard <a> -ankertag:

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

Dit kan helpen het verschil tussen SPA het verpletteren en regelmatige Web-pagina verbindingen illustreren.