Hinzufügen von Navigation und Routing

Erfahren Sie, wie mehrere Ansichten im SPA unterstützt werden können, indem Sie sie mit dem SPA Editor SDK AEM Seiten zuordnen. Die dynamische Navigation wird mit React-Router und React-Kernkomponenten implementiert.

Ziel

Machen Sie sich mit den SPA Routing-Optionen vertraut, die bei Verwendung des SPA-Editors verfügbar sind.
Verwendung React-Router um zwischen verschiedenen Ansichten des SPA zu navigieren.
Verwenden Sie AEM React-Kernkomponenten, um eine dynamische Navigation zu implementieren, die von der AEM Seitenhierarchie gesteuert wird.

Was Sie erstellen werden

Dieses Kapitel fügt einem SPA in AEM Navigation hinzu. Das Navigationsmenü wird von der AEM Seitenhierarchie gesteuert und nutzt das JSON-Modell, das von der Navigations-Kernkomponente.

Navigation hinzugefügt

Voraussetzungen

Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung. Dieses Kapitel ist eine Fortsetzung der Zuordnungskomponenten -Kapitel zu folgen, ist jedoch ein SPA-aktiviertes AEM-Projekt, das in einer lokalen AEM-Instanz bereitgestellt wird.

Öffnen Sie einen Browser und melden Sie sich bei AEM an. http://localhost:4502/. Die Basis für den Startcode sollte bereits bereitgestellt werden.
Navigieren Sie zum SPA Seitenvorlage: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.
Auswählen des äußersten Root Layout Container und klicken Sie auf Politik Symbol. Pass auf not zur Auswahl der Layout-Container nicht gesperrt für die Bearbeitung.
Erstellen Sie eine neue Richtlinie mit dem Namen SPA:

under Zugelassene Komponenten > Allgemein > wählen Sie die Layout-Container -Komponente.

under Zugelassene Komponenten > WKND SPA REACT - STRUKTUR > wählen Sie die Navigation component:

under Zugelassene Komponenten > WKND SPA REACT - Content > wählen Sie die Bild und Text Komponenten. Es sollten vier Komponenten ausgewählt sein.

Klicken Fertig , um die Änderungen zu speichern.
Aktualisieren Sie die Seite und fügen Sie die Navigation Komponente über der nicht gesperrten Layout-Container:
Wählen Sie die Navigation Komponente und klicken Sie auf ihre Politik zum Bearbeiten der Richtlinie.
Erstellen Sie eine neue Richtlinie mit einer Richtlinienname von SPA.

Unter dem Eigenschaften:
- Legen Sie die Navigationsstamm nach /content/wknd-spa-react/us/en.
- Legen Sie die Ausschließen von Stammebenen nach 1.
- Deaktivieren Sammlung aller untergeordneten Seiten.
- Legen Sie die Navigationsstrukturtiefe nach 3.
Dadurch werden die Navigations-2-Ebenen unten erfasst /content/wknd-spa-react/us/en.
Nach dem Speichern der Änderungen sollte die Navigation als Teil der Vorlage:

Untergeordnete Seiten erstellen

Als Nächstes erstellen Sie zusätzliche Seiten in AEM , die als verschiedene Ansichten in der SPA dienen. Wir werden auch die hierarchische Struktur des von AEM bereitgestellten JSON-Modells untersuchen.

Navigieren Sie zum Sites console: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Wählen Sie die WKND SPA React-Homepage und klicken Sie auf Erstellen > Seite:
under Vorlage select SPA. under Eigenschaften enter Seite 1 für Titel und page-1 als Namen.

Klicken Erstellen und klicken Sie im Popup-Dialogfeld auf Öffnen , um die Seite im AEM SPA Editor zu öffnen.
Hinzufügen neuer Text -Komponente in die Hauptkomponente Layout-Container. Bearbeiten Sie die Komponente und geben Sie den Text ein: Seite 1 mithilfe des RTE und der H2 -Element.

Sie können zusätzliche Inhalte hinzufügen, wie z. B. ein Bild.
Kehren Sie zur AEM Sites-Konsole zurück und wiederholen Sie die oben beschriebenen Schritte. Erstellen Sie dann eine zweite Seite mit dem Namen Seite 2 als Geschwister Seite 1.
Erstellen Sie abschließend eine dritte Seite. Seite 3 aber als child von Seite 2. Nach Abschluss der Site-Hierarchie sollte wie folgt aussehen:
Die Navigationskomponente kann jetzt verwendet werden, um zu verschiedenen Bereichen des SPA zu navigieren.
Öffnen Sie die Seite außerhalb des AEM-Editors: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Verwenden Sie die Navigation -Komponente, um zu verschiedenen Ansichten der App zu navigieren.
Verwenden Sie beim Navigieren die Entwicklertools Ihres Browsers, um die Netzwerkanforderungen zu überprüfen. Die folgenden Screenshots werden aus dem Chrome-Browser von Google erfasst.

Beachten Sie, dass die nachfolgende Navigation nach dem ersten Laden der Seite nicht zu einer vollständigen Seitenaktualisierung führt und dass der Netzwerk-Traffic bei der Rückkehr zu zuvor besuchten Seiten minimiert wird.

JSON-Modell für Hierarchieseite

Überprüfen Sie anschließend das JSON-Modell, das das mehrdimensionale Erlebnis des SPA steuert.

Öffnen Sie in einer neuen Registerkarte die von AEM bereitgestellte JSON-Modell-API: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Es kann hilfreich sein, eine Browsererweiterung zu verwenden, um JSON formatieren.

Dieser JSON-Inhalt wird angefordert, wenn die SPA zum ersten Mal geladen wird. Die äußere Struktur sieht wie folgt aus:
```
{
"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 sollte für jede der erstellten Seiten ein Eintrag angezeigt werden. Der Inhalt für alle Seiten befindet sich in dieser ersten JSON-Anfrage. Beim Navigations-Routing werden nachfolgende Ansichten des SPA schnell geladen, da der Inhalt bereits clientseitig verfügbar ist.

Es ist nicht ratsam, ALL des Inhalts einer SPA in der ersten JSON-Anfrage, da dies das anfängliche Laden der Seite verlangsamen würde. Als Nächstes wird untersucht, wie die Hierarchietiefe von Seiten erfasst wird.
Navigieren Sie zum SPA Vorlage unter: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

Klicken Sie auf Menü "Seiteneigenschaften" > Seitenrichtlinie:
Die SPA -Vorlage weist eine zusätzliche Hierarchische Struktur -Tab, um den erfassten JSON-Inhalt zu steuern. Die Strukturtiefe bestimmt, wie tief in der Site-Hierarchie untergeordnete Seiten unterhalb der root. Sie können auch die Strukturmuster -Feld zum Filtern zusätzlicher Seiten basierend auf einem regulären Ausdruck.

Aktualisieren Sie die Strukturtiefe nach 2:

Klicken Fertig , um die Änderungen an der Richtlinie zu speichern.

Erneutes Öffnen des JSON-Modells 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": {}
   }
}

Beachten Sie, dass Seite 3 path wurde entfernt: /content/wknd-spa-react/us/en/home/page-2/page-3 vom ersten JSON-Modell aus. Dies liegt daran, dass Seite 3 befindet sich auf einer Ebene 3 in der Hierarchie und wir haben die Richtlinie aktualisiert, sodass sie nur Inhalte mit einer maximalen Tiefe von Stufe 2 enthält.

Öffnen Sie die SPA Homepage erneut: http://localhost:4502/content/wknd-spa-react/us/en/home.html und öffnen Sie die Entwicklertools Ihres Browsers.

Aktualisieren Sie die Seite und Sie sollten die XHR-Anfrage an /content/wknd-spa-react/us/en.model.json, der SPA Stamm. Beachten Sie, dass nur drei untergeordnete Seiten enthalten sind, basierend auf der Hierarchietiefenkonfiguration der SPA-Stammvorlage, die zuvor im Tutorial vorgenommen wurde. Dies umfasst nicht Seite 3.
Wenn die Entwicklertools geöffnet sind, verwenden Sie die Navigation Komponente zur direkten Navigation zu Seite 3:

Beachten Sie, dass eine neue XHR-Anfrage an Folgendes gesendet wird: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

Der AEM Model Manager versteht, dass die Seite 3 JSON-Inhalt ist nicht verfügbar und Trigger automatisch die zusätzliche XHR-Anforderung.
Experimentieren Sie mit Deep-Links, indem Sie direkt zu folgenden Elementen navigieren: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Beachten Sie außerdem, dass die Zurück-Schaltfläche des Browsers weiterhin funktioniert.

Inspect React Routing

Die Navigation und das Routing werden mit React-Router. React Router sind eine Sammlung von Navigationskomponenten für React-Anwendungen. AEM React-Kernkomponenten verwendet Funktionen des React-Routers, um die Navigation -Komponente, die in den vorherigen Schritten verwendet wurde.

Überprüfen Sie als Nächstes, wie der React-Router mit dem SPA integriert ist, und experimentieren Sie mit dem React-Router. Link -Komponente.

Öffnen Sie die -Datei in der IDE. index.js at 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')
    );
});

Beachten Sie, dass App in der Router Komponente aus React-Router. Die ModelManager, bereitgestellt vom AEM SPA Editor JS SDK, fügt die dynamischen Routen zu AEM Seiten hinzu, basierend auf der JSON-Modell-API.

Öffnen Sie die Datei Page.js unter 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))
);

Die Page SPA Komponente verwendet MapTo Funktion zum Zuordnen Seiten in eine entsprechende SPA Komponente AEM. Die withRoute -Dienstprogramm hilft beim dynamischen Routing des SPA zur entsprechenden untergeordneten Seite AEM basierend auf der cqPath -Eigenschaft.

Öffnen Sie die Header.js Komponente bei ui.frontend/src/components/Header/Header.js.

Aktualisieren Sie die Header um die <h1> Tag in einem Link auf der Homepage:

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

Statt eine Standardeinstellung zu verwenden <a> Anker-Tag verwenden <Link> bereitgestellt vom React-Router. Solange die Variable to= auf eine gültige Route verweist, wechselt der SPA zu dieser Route und not Führen Sie eine vollständige Seitenaktualisierung durch. Hier wird der Link zur Startseite einfach hartcodiert, um die Verwendung von Link.

Aktualisieren Sie den Test bei App.test.js at 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);
  });

Da wir Funktionen des React-Routers innerhalb einer statischen Komponente verwenden, auf die in App.js müssen wir den Komponententest aktualisieren, um dies zu berücksichtigen.

Öffnen Sie ein Terminal, navigieren Sie zum Stammverzeichnis des Projekts und stellen Sie das Projekt mithilfe Ihrer Maven-Kenntnisse AEM bereit:
```
$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage
```
Navigieren Sie zu einer der Seiten im SPA in AEM: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Statt die Navigation -Komponente, um zu navigieren, verwenden Sie den Link im Header.

Beachten Sie, dass eine vollständige Seitenaktualisierung not ausgelöst wurde und das SPA Routing funktioniert.
Experimentieren Sie optional mit der Header.js Datei mit einer Standarddatei <a> Anker-Tag:
```
<a href="/content/wknd-spa-react/us/en/home.html">
    <h1>WKND</h1>
</a>
```
Dies kann den Unterschied zwischen SPA Routing und regulären Web-Seiten-Links veranschaulichen.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben erfahren, wie mehrere Ansichten im SPA durch die Zuordnung zu AEM Seiten mit dem SPA Editor SDK unterstützt werden können. Die dynamische Navigation wurde mit dem React-Router implementiert und zum Header -Komponente.

Ziel

Was Sie erstellen werden

Voraussetzungen

Hinzufügen der Navigation zur Vorlage

Untergeordnete Seiten erstellen

JSON-Modell für Hierarchieseite

Inspect React Routing

Herzlichen Glückwunsch!

Ressourcen für Business.Adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe