Agregar navegación y enrutamiento navigation-routing

AEM Abra un explorador e inicie sesión en el sitio de inicio de sesión, http://localhost:4502/. La base del código de inicio ya debería implementarse.

SPA Vaya a la Plantilla de página de: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

Seleccione el contenedor de diseño raíz más externo y haga clic en su icono directiva. Tenga cuidado no al seleccionar el contenedor de diseño desbloqueado para la creación.

SPA Cree una nueva directiva con el nombre Estructura de la:

SPA

En Componentes permitidos > General > seleccione el componente Contenedor de diseño.

SPA En Componentes permitidos > WKND REACT - ESTRUCTURA > seleccione el componente Navegación:

SPA En Componentes permitidos > WKND REACT - Contenido > seleccione los componentes Imagen y Texto. Debe tener un total de 4 componentes seleccionados.

Haga clic en Listo para guardar los cambios.

Actualice la página y agregue el componente Navigation sobre el contenedor de diseño que no está bloqueado:

Seleccione el componente Navegación y haga clic en su icono Directiva para editar la directiva.

SPA Cree una nueva directiva con un Título de directiva de Navegación en la.

En Propiedades:

• Establezca Raíz de navegación en /content/wknd-spa-react/us/en.
• Establecer Excluir niveles de raíz en 1.
• Desmarque Recopilar todas las páginas secundarias.
• Establezca la profundidad de la estructura de navegación en 3.

Se recopilará la navegación 2 niveles por debajo de /content/wknd-spa-react/us/en.

Después de guardar los cambios, debería ver los Navigation rellenados como parte de la plantilla:

Vaya a la consola de Sites: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. SPA Seleccione la Página principal de WKND de React y haga clic en Crear > Página:

SPA En Plantilla, seleccione Página de. En Propiedades, escriba Página 1 para el Título y página-1 como nombre.

AEM SPA Haga clic en Crear y, en el cuadro de diálogo emergente, haga clic en Abrir para abrir la página en el Editor de.

Agregue un nuevo componente Text al contenedor de diseño principal. Edite el componente e introduzca el texto: Página 1 con el RTE y el elemento H2.

No dude en añadir contenido adicional, como una imagen.

Vuelva a la consola de AEM Sites y repita los pasos anteriores, creando una segunda página denominada Página 2 como elemento secundario de Página 1.

Por último, cree una tercera página, Página 3, pero como elemento secundario de Página 2. Una vez completada, la jerarquía del sitio debe tener el siguiente aspecto:

SPA Ahora, el componente Navegación se puede utilizar para desplazarse a diferentes áreas de la.

AEM Abra la página fuera del Editor de la: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Utilice el componente Navegación para navegar a diferentes vistas de la aplicación.

Utilice las herramientas para desarrolladores del explorador para inspeccionar las solicitudes de red a medida que navega. Las capturas de pantalla a continuación se capturan desde el navegador Google Chrome.

Observe que después de la carga inicial de la página, la navegación posterior no provoca una actualización de la página completa y que el tráfico de red se minimiza al volver a páginas visitadas anteriormente.

AEM En una pestaña nueva, abra la API del modelo JSON proporcionada por el usuario: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Puede resultar útil usar una extensión de explorador para dar formato al JSON.

SPA Este contenido JSON se solicita cuando se carga la por primera vez. La estructura exterior tiene el siguiente aspecto:

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

En :children debería ver una entrada para cada una de las páginas creadas. El contenido de todas las páginas se encuentra en esta solicitud JSON inicial. SPA Con el enrutamiento de navegación, las vistas subsiguientes de la se cargan rápidamente, ya que el contenido ya está disponible en el lado del cliente.

SPA No es aconsejable cargar ALL del contenido de un elemento en la solicitud inicial de JSON, ya que esto ralentizaría la carga inicial de la página. A continuación, veamos cómo se recopila la profundidad de jerarquía de las páginas.

SPA Vaya a la plantilla Raíz de en: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

Haga clic en el menú Propiedades de página > Directiva de página:

SPA

SPA La plantilla Raíz de tiene una ficha Estructura jerárquica adicional para controlar el contenido JSON recopilado. La profundidad de la estructura determina la profundidad en la jerarquía del sitio para recopilar páginas secundarias debajo de la raíz. También puede usar el campo Patrones de estructura para filtrar páginas adicionales en función de una expresión regular.

Actualizar la profundidad de la estructura a 2:

Haga clic en Listo para guardar los cambios en la directiva.

Vuelva a abrir el modelo 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": {}
   }
}

Observe que la ruta de acceso Página 3 se ha eliminado: /content/wknd-spa-react/us/en/home/page-2/page-3 del modelo JSON inicial. Esto se debe a que Página 3 se encuentra en un nivel 3 de la jerarquía y hemos actualizado la directiva para incluir únicamente contenido con una profundidad máxima de nivel 2.

SPA Vuelva a abrir la página principal de la: http://localhost:4502/content/wknd-spa-react/us/en/home.html y abra las herramientas para desarrolladores del explorador.

SPA Actualice la página y debería ver la solicitud XHR a /content/wknd-spa-react/us/en.model.json, que es la raíz de la. SPA Tenga en cuenta que solo se incluyen tres páginas secundarias en función de la configuración de profundidad de jerarquía a la plantilla Raíz de realizada anteriormente en el tutorial. Esto no incluye Página 3.

SPA

Con las herramientas para desarrolladores abiertas, use el componente Navigation para navegar directamente a Página 3:

Observe que se hace una nueva solicitud XHR a: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

AEM El Administrador de modelos de datos entiende que el contenido JSON de la página 3 no está disponible y déclencheur automáticamente la solicitud XHR adicional.

Experimente con vínculos profundos directamente a: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Observe también que el botón Atrás del explorador sigue funcionando.

En el IDE, abra el archivo index.js a las 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')
    );
});

Observe que App está dentro del componente Router de React Router. AEM SPA AEM ModelManager, proporcionado por el SDK de JS del Editor de de datos, agrega las rutas dinámicas a las páginas de la página de datos basadas en la API del modelo JSON.

Abrir el archivo Page.js en 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))
);

SPA AEM SPA El componente Page utiliza la función MapTo para asignar Páginas en el área de trabajo a un componente de correspondiente. SPA AEM La utilidad withRoute ayuda a enrutar dinámicamente la a la página secundaria adecuada basada en la propiedad cqPath.

Abra el componente Header.js en ui.frontend/src/components/Header/Header.js.

Actualice Header para envolver la etiqueta <h1> en un vínculo a la página principal:

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

En lugar de usar una etiqueta de anclaje predeterminada <a>, usamos <Link> proporcionada por el enrutador React. SPA Siempre que to= apunte a una ruta válida, el cambiará a esa ruta y no realizará una actualización de la página completa. Aquí simplemente codificamos el vínculo a la página principal para ilustrar el uso de Link.

Actualice la prueba en App.test.js a las 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);
  });

Como estamos usando características del enrutador React dentro de un componente estático al que se hace referencia en App.js, necesitamos actualizar la prueba unitaria para tener en cuenta dicho componente.

AEM Abra un terminal, vaya a la raíz del proyecto e implemente el proyecto para que utilice sus habilidades con Maven:

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

SPA AEM Vaya a una de las páginas de la página de la página de la página en la que se encuentra el: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html.

En lugar de usar el componente Navigation para navegar, use el vínculo en Header.

SPA Observe que se ha activado una actualización de página completa de no y que el enrutamiento de está funcionando.

De forma opcional, experimente con el archivo Header.js mediante una etiqueta de anclaje estándar <a>:

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

SPA Esto puede ayudar a ilustrar la diferencia entre el enrutamiento de la y los vínculos de página web normales.