{"id":1675,"date":"2024-08-02T11:04:17","date_gmt":"2024-08-02T09:04:17","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1675"},"modified":"2024-08-02T11:04:18","modified_gmt":"2024-08-02T09:04:18","slug":"008-enrutamiento-router","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/18-single-page-application-spa\/008-enrutamiento-router\/","title":{"rendered":"008. Enrutamiento (Router)"},"content":{"rendered":"\n

En el cap\u00edtulo anterior aprendimos a pintar en pantalla lo que eran las \u00faltimas 10 publicaciones de nuestro sitio WordPress<\/strong> a trav\u00e9s de la API del mismo.<\/p>\n\n\n\n

En este cap\u00edtulo construimos un router<\/strong> en el que dependiendo de la secci\u00f3n en la que nos encontremos, pueda generar el contenido correspondiente. Crearemos un componente<\/strong> nuevo denominado Router.js<\/em>. En este archivo es donde vamos a tener toda la invocaci\u00f3n de las peticiones que tenemos que hacer dependiendo la secci\u00f3n de contenido que necesitemos.<\/p>\n\n\n\n\n\n\n\n

En este cap\u00edtulo hemos creado el archivo Router.js<\/em> y modificado los archivos index.js<\/em>, ajax.js<\/em>, Menu.js<\/em> App.js<\/em>. La sintaxis para cada uno de los archivos es.<\/p>\n\n\n\n

Sintaxis de Router.js<\/em>.<\/p>\n\n\n\n

import api from \"..\/helpers\/wp-api.js\";\nimport { ajax } from \"..\/helpers\/ajax.js\";\nimport { PostCard } from \".\/PostCard.js\";\n\nexport function Router() {\n  const d = document,\n    w = window,\n    $posts = d.getElementById(\"posts\");\n\n  let { hash } = location;\n  console.log(hash);\n\n  $posts.innerHTML = null;\n\n  if (!hash || hash === \"#\/\") {\n    ajax({\n      url: api.POSTS,\n      cbSuccess: (posts) => {\n        \/\/console.log(posts);\n        let html = \"\";\n        posts.forEach((post) => {\n          html += PostCard(post);\n        });\n        d.querySelector(\".loader\").style.display = \"none\";\n        $posts.innerHTML = html;\n      },\n    });\n  } else if (hash.includes(\"#\/search\")) {\n    $posts.innerHTML = `<h2>Secci\u00f3n del Buscador<\/h2>`;\n  } else if (hash === \"#\/contacto\") {\n    $posts.innerHTML = `<h2>Secci\u00f3n de Contacto<\/h2>`;\n  } else {\n    $posts.innerHTML = `<h2>Aqu\u00ed se carga el contenido del post seleccionado<\/h2>`;\n  }\n}<\/pre>\n\n\n\n
Sintaxis de App.js<\/em>.<\/p>\n\n\n\n
import { Header } from \".\/components\/Header.js\";\nimport { Loader } from \".\/components\/Loader.js\";\nimport { Posts } from \".\/components\/Posts.js\";\nimport { Router } from \".\/components\/Router.js\";\n\nexport function App() {\n  const $root = document.getElementById(\"root\");\n  $root.appendChild(Header());\n  $root.appendChild(Posts());\n  $root.appendChild(Loader());\n  Router();\n}<\/pre>\n\n\n\n
Sintaxis de index.js<\/em>.<\/p>\n\n\n\n
import { App } from \".\/App.js\";\n\ndocument.addEventListener(\"DOMContentLoaded\", App);\n\nwindow.addEventListener(\"hashchange\", App);<\/pre>\n\n\n\n
Sintaxis de ajax.js<\/em>.<\/p>\n\n\n\n
export function ajax(props) {\n  let { url, cbSuccess } = props;\n\n  fetch(url)\n    .then((res) => (res.ok ? res.json() : Promise.reject(res)))\n    .then((json) => cbSuccess(json))\n    .catch((err) => {\n      let message = err.statusText || \"Ocurri\u00f3 un error al acceder a la API\";\n      document.getElementById(\"posts\").innerHTML = `\n            <div class=\"error\">\n                <p>Error: ${err.status}: ${message}<\/p>\n            <\/div>\n        `;\n      document.querySelector(\".loader\").style.display = \"none\";\n      console.log(err);\n    });\n}<\/pre>\n\n\n\n
Sintaxis de Menu.js<\/em>.<\/p>\n\n\n\n
export function Menu() {\n  const $menu = document.createElement(\"nav\");\n  $menu.classList.add(\"menu\");\n  $menu.innerHTML = `\n        <a href=\"#\/\">Home<\/a>\n        <span><\/span>\n        <a href=\"#\/search\">B\u00fasqueda<\/a>\n        <span><\/span>\n        <a href=\"#\/contacto\">Contacto<\/a>\n        <span><\/span>\n        <a href=\"https:\/\/sutilweb.eu\" target=\"_blank\" rel=\"noopener\">Sutil Web<\/a>\n        <span><\/span>\n    `;\n  return $menu;\n}<\/pre>\n\n\n\n
Archivos<\/h2>\n\n\n\n
El total de los archivos creados hasta la fecha se encuentra en el siguiente enlace:<\/p>\n\n\n\n
spa-5<\/a>Descarga<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
En el cap\u00edtulo anterior aprendimos a pintar en pantalla lo que eran las \u00faltimas 10 publicaciones de nuestro sitio WordPress a trav\u00e9s de la API del mismo. En este cap\u00edtulo construimos un router en el que dependiendo de la secci\u00f3n en la que nos encontremos, pueda generar el contenido correspondiente. Crearemos un componente nuevo denominado […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1646,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1675","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En el cap\u00edtulo anterior aprendimos a pintar en pantalla lo que eran las \u00faltimas 10 publicaciones de nuestro sitio WordPress a trav\u00e9s de la API del mismo. En este cap\u00edtulo construimos un router en el que dependiendo de la secci\u00f3n en la que nos encontremos, pueda generar el contenido correspondiente. Crearemos un componente nuevo denominado…","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1675"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1675\/revisions"}],"predecessor-version":[{"id":1678,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1675\/revisions\/1678"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1646"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}