Lägga till navigering och routning navigation-routing

Öppna en webbläsare och logga in på AEM, http://localhost:4502/. Startkodbasen ska redan distribueras.

Navigera till SPA sidmall: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

Markera den yttre rotlayoutbehållaren och klicka på ikonen Princip . Var försiktig så att inte layoutbehållaren inte är låst för redigering.

Skapa en ny princip med namnet SPA Struktur:

Välj komponenten Layoutbehållare under Tillåtna komponenter > Allmänt >.

Under Tillåtna komponenter > WKND SPA REACT - STRUKTUR > väljer du komponenten Navigation:

Under Tillåtna komponenter > WKND SPA REACT - Innehåll > markerar du komponenterna Bild och Text. Du bör välja totalt 4 komponenter.

Klicka på Klar för att spara ändringarna.

Uppdatera sidan och lägg till komponenten Navigation ovanför den olåsta layoutbehållaren:

Markera navigeringskomponenten och klicka på dess princip-ikon för att redigera profilen.

Skapa en ny princip med en principtitel på SPA Navigering.

Under Egenskaper:

• Ange Navigeringsrot till /content/wknd-spa-react/us/en.
• Ange Uteslut rotnivåer till 1.
• Avmarkera Samla in alla underordnade sidor.
• Ange Navigeringsstrukturdjupet till 3.

Detta samlar in navigering 2 nivåer under /content/wknd-spa-react/us/en.

När du har sparat dina ändringar bör du se det ifyllda Navigation som en del av mallen:

Gå till konsolen Platser: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Markera WKND SPA React Home Page och klicka på Create > Page:

Under Mall väljer du SPA sida. Under Egenskaper anger du Sida 1 som namn för Titel och sida-1.

Klicka på Skapa och klicka på Öppna i popup-dialogrutan för att öppna sidan i AEM SPA.

Lägg till en ny Text-komponent i huvudlayoutbehållaren. Redigera komponenten och ange texten: Sida 1 med RTE och elementet H2 .

Du kan lägga till ytterligare innehåll, som en bild.

Gå tillbaka till AEM Sites-konsolen och upprepa stegen ovan, och skapa en andra sida med namnet Sida 2 som motsvarar sidan 1.

Skapa slutligen en tredje sida, Sida 3, men som underordnad till sida 2. När webbplatshierarkin är klar ska den se ut så här:

Navigeringskomponenten kan nu användas för att navigera till olika delar av SPA.

Öppna sidan utanför AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Använd komponenten Navigation för att navigera till olika vyer av programmet.

Använd webbläsarens utvecklarverktyg för att inspektera nätverksförfrågningar när du navigerar. Skärmbilder nedan hämtas från Google Chrome webbläsare.

Observera att efter den första sidinläsningen kommer efterföljande navigering inte att orsaka en uppdatering av hela sidan och att nätverkstrafiken minimeras när du återgår till tidigare besökta sidor.

På en ny flik öppnar du JSON-modell-API:t som tillhandahålls av AEM: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Det kan vara praktiskt att använda ett webbläsartillägg för att formatera JSON.

Detta JSON-innehåll begärs när SPA läses in första gången. Den yttre strukturen ser ut så här:

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

Under :children ska du se en post för varje sida som skapas. Innehållet för alla sidor finns i den här inledande JSON-begäran. Med navigeringsroutningen läses efterföljande vyer av SPA in snabbt eftersom innehållet redan är tillgängligt på klientsidan.

Det är inte klokt att läsa in ALL av innehållet i en SPA i den inledande JSON-begäran, eftersom det skulle göra den inledande sidinläsningen långsammare. Sedan ska vi titta på hur sidornas hierarkidjup samlas in.

Gå till mallen SPA Root på: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

Klicka på menyn Sidegenskaper > Sidprofil:

Mallen SPA Root har en extra hierarkisk struktur-flik som styr JSON-innehållet som samlas in. Strukturdjupet avgör hur djupt i platshierarkin underordnade sidor ska samlas under rotmappen. Du kan också använda fältet Strukturmönster för att filtrera bort ytterligare sidor baserat på ett reguljärt uttryck.

Uppdatera strukturdjupet till ​:

Klicka på Klar om du vill spara ändringarna i profilen.

Öppna JSON-modellen http://localhost:4502/content/wknd-spa-react/us/en.model.json igen.

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

Observera att sökvägen Sidan 3 har tagits bort: /content/wknd-spa-react/us/en/home/page-2/page-3 från den ursprungliga JSON-modellen. Detta beror på att sidan 3 är på nivå 3 i hierarkin och att vi har uppdaterat principen så att endast innehåll med maximalt djup på nivå 2 inkluderas.

Öppna SPA startsida igen: http://localhost:4502/content/wknd-spa-react/us/en/home.html och öppna webbläsarens utvecklingsverktyg.

Uppdatera sidan så ska du se XHR-begäran till /content/wknd-spa-react/us/en.model.json, som är SPA. Observera att endast tre underordnade sidor inkluderas baserat på hierarkidjupets konfiguration till SPA rotmall som skapades tidigare i självstudiekursen. Detta inkluderar inte sidan 3.

När utvecklingsverktygen är öppna använder du komponenten Navigation för att navigera direkt till sidan 3:

Observera att en ny XHR-begäran görs till: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

Den AEM modellhanteraren förstår att JSON-innehållet Sidan 3 inte är tillgängligt och utlöser automatiskt den ytterligare XHR-begäran.

Experimentera med djupa länkar genom att navigera direkt till: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Tänk också på att webbläsarens bakåtknapp fortsätter att fungera.

I IDE öppnar du filen index.js vid 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')
    );
});

Observera att App är omsluten i komponenten Router från React Router. ModelManager, som tillhandahålls av AEM JS SDK-redigeraren för SPA, lägger till dynamiska vägar till AEM sidor baserat på JSON-modellens API.

Öppna filen Page.js vid 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))
);

Komponenten Page SPA använder funktionen MapTo för att mappa sidor i AEM till en motsvarande SPA. Verktyget withRoute hjälper till att dynamiskt dirigera SPA till rätt AEM underordnad sida baserat på egenskapen cqPath.

Öppna komponenten Header.js på ui.frontend/src/components/Header/Header.js.

Uppdatera Header för att kapsla in taggen <h1> i en länk på startsidan:

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

I stället för att använda standardankartaggen <a> använder vi <Link> som tillhandahålls av React Router. Så länge som to= pekar på en giltig väg, kommer SPA att växla till den vägen och inte utföra en uppdatering av hela sidan. Här kan vi helt enkelt hårdkoda länken till hemsidan för att visa hur Link används.

Uppdatera testet App.test.js 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);
  });

Eftersom vi använder funktionerna i React Router i en statisk komponent som refereras i App.js måste vi uppdatera enhetstestet för att ta hänsyn till det.

Öppna en terminal, navigera till projektets rot och distribuera projektet till AEM med dina Maven-kunskaper:

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

Navigera till en av sidorna i SPA i AEM: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Använd länken i Header i stället för att använda komponenten Navigation för att navigera.

Observera att en uppdatering av hela sidan har inte utlösts och att SPA fungerar.

Du kan också experimentera med filen Header.js med en <a> -ankartagg som standard:

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

Detta kan illustrera skillnaden mellan SPA och vanliga länkar på webbsidor.