008. Enrutamiento (Router)

En el capítulo anterior aprendimos a pintar en pantalla lo que eran las últimas 10 publicaciones de nuestro sitio WordPress a través de la API del mismo.

En este capítulo construimos un router en el que dependiendo de la sección en la que nos encontremos, pueda generar el contenido correspondiente. Crearemos un componente nuevo denominado Router.js. En este archivo es donde vamos a tener toda la invocación de las peticiones que tenemos que hacer dependiendo la sección de contenido que necesitemos.

En este capítulo hemos creado el archivo Router.js y modificado los archivos index.js, ajax.js, Menu.js App.js. La sintaxis para cada uno de los archivos es.

Sintaxis de Router.js.

import api from "../helpers/wp-api.js";
import { ajax } from "../helpers/ajax.js";
import { PostCard } from "./PostCard.js";

export function Router() {
  const d = document,
    w = window,
    $posts = d.getElementById("posts");

  let { hash } = location;
  console.log(hash);

  $posts.innerHTML = null;

  if (!hash || hash === "#/") {
    ajax({
      url: api.POSTS,
      cbSuccess: (posts) => {
        //console.log(posts);
        let html = "";
        posts.forEach((post) => {
          html += PostCard(post);
        });
        d.querySelector(".loader").style.display = "none";
        $posts.innerHTML = html;
      },
    });
  } else if (hash.includes("#/search")) {
    $posts.innerHTML = `<h2>Sección del Buscador</h2>`;
  } else if (hash === "#/contacto") {
    $posts.innerHTML = `<h2>Sección de Contacto</h2>`;
  } else {
    $posts.innerHTML = `<h2>Aquí se carga el contenido del post seleccionado</h2>`;
  }
}

Sintaxis de App.js.

import { Header } from "./components/Header.js";
import { Loader } from "./components/Loader.js";
import { Posts } from "./components/Posts.js";
import { Router } from "./components/Router.js";

export function App() {
  const $root = document.getElementById("root");
  $root.appendChild(Header());
  $root.appendChild(Posts());
  $root.appendChild(Loader());
  Router();
}

Sintaxis de index.js.

import { App } from "./App.js";

document.addEventListener("DOMContentLoaded", App);

window.addEventListener("hashchange", App);

Sintaxis de ajax.js.

export function ajax(props) {
  let { url, cbSuccess } = props;

  fetch(url)
    .then((res) => (res.ok ? res.json() : Promise.reject(res)))
    .then((json) => cbSuccess(json))
    .catch((err) => {
      let message = err.statusText || "Ocurrió un error al acceder a la API";
      document.getElementById("posts").innerHTML = `
            <div class="error">
                <p>Error: ${err.status}: ${message}</p>
            </div>
        `;
      document.querySelector(".loader").style.display = "none";
      console.log(err);
    });
}

Sintaxis de Menu.js.

export function Menu() {
  const $menu = document.createElement("nav");
  $menu.classList.add("menu");
  $menu.innerHTML = `
        <a href="#/">Home</a>
        <span></span>
        <a href="#/search">Búsqueda</a>
        <span></span>
        <a href="#/contacto">Contacto</a>
        <span></span>
        <a href="https://sutilweb.eu" target="_blank" rel="noopener">Sutil Web</a>
        <span></span>
    `;
  return $menu;
}

Archivos

El total de los archivos creados hasta la fecha se encuentra en el siguiente enlace:

Scroll al inicio