{"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…<\/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":"","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...","_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}]}}