No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Arquitectura y manipulación de rutas en aplicaciones web

10/16
Recursos

¿Cómo se maneja la lógica de las rutas en una aplicación?

El manejo de rutas es esencial en el desarrollo de aplicaciones web para proporcionar una experiencia de usuario fluida. Esta lógica determina cómo la aplicación reacciona al movimiento del usuario entre diferentes secciones. Para esto, es importante utilizar funciones clave y establecer estructuras lógicas que definan cómo se deben gestionar dichas rutas y cómo debe comportarse la aplicación frente a ellas.

¿Qué funciones se utilizan para gestionar las rutas?

Para gestionar correctamente las rutas, se requieren funciones específicas:

  • Obtener y validar el hash: Es esencial para determinar la ruta actual. La función de obtención del hash es crucial para identificar en qué sección del sitio se encuentra el usuario o hacia dónde se está moviendo.
  • Configuración de las rutas: Utilizando estructuras como objetos o arrays para definir rutas y sus correspondientes acciones o vistas.
  • Manejo de errores: Implementación de una lógica que, al no encontrar una ruta, devuelva un error 404, indicando que la página solicitada no existe.

¿Cuál es la estructura básica del código para manejar rutas?

En el desarrollo de esta funcionalidad, el uso de variables let es común para establecer la lógica necesaria:

let hash = await obtenerHash();
let route = await resolveHash(hash);
let render = ( routes[route] ? routes[route] : 'error 404');

let container = document.querySelector('#app');
container.innerHTML = await render();

¿Cómo se asegura el código de que una ruta es válida?

La validación de rutas se realiza mediante condicionales y operadores ternarios:

  • Condicionales y operadores ternarios: Se emplean para chequear la existencia y validez de una ruta determinada. Por ejemplo, con if se verifica si el valor obtenido pertenece a las rutas predefinidas o si debe mostrarse un error.

¿Cómo se implementa un event listener para los cambios de hash?

La aplicación de un EventListener en la ventana ayuda a escuchar cambios en el hash:

window.addEventListener('hashchange', () => {
   routeHandler();
});

¿Cómo se integran las rutas en el documento principal?

¿Qué modificaciones se realizan en el archivo principal Index.js?

En el archivo Index.js se importa la lógica de rutas y se configuran EventListeners adicionales:

  • EventListener para el primer cargar de la página: Se asegura de que la página cargue correctamente al inicio.
  • Escucha activa de cambios en rutas: El EventListener se encarga de detectar cuando hay modificaciones en el hash, desencadenando funciones adecuadas para refrescar la vista según las nuevas rutas.

¿Cómo se verifica y prueba la lógica implementada?

Para garantizar que las rutas funcionan correctamente, sigue estos pasos:

  1. Revisión meticulosa del código: Similar a buena práctica del debugging, revisa línea por línea para identificar posibles errores lógicos o de sintaxis.
  2. Pruebas en el navegador: Una vez que la lógica esté implementada, realiza pruebas en vivo para garantizar que la aplicación renderiza correctamente las vistas correspondientes a cada ruta.
  3. Verificación del 404: Intenta acceder a rutas no definidas para corroborar que el error 404 se muestra adecuadamente.

Con la implementación de esta lógica de rutas, la aplicación está lista para manejar de manera eficiente la navegación del usuario, proporcionando una experiencia de usuario sólida y estructurada. Si bien hasta este punto hemos enfocado en la navegación, el siguiente paso será conectar la aplicación a una API para obtener y renderizar datos dinámicos. ¡Sigue aprendiendo y aplicando lo aprendido en proyectos reales!

Aportes 46

Preguntas 23

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si en lugar del home te aparece Error 404:

En el archivo resolveRoutes.js elimina el template literal al momento de retornar route, ya que si no lo haces estarías agregando una ‘/’ de más a la ruta y eso ocasiona que al momento de ingresar al sitio la ruta sea ‘//’, la cual no existe y por eso te redirige al 404 page.

El código queda de la siguiente forma:

resolveRoutes.js :

const resolveRoutes = (route) => {
  if (route.length <= 3) {
    let validRoute = route === '/' ? route : '/:id';
    return validRoute;
  } 
  return route;
}

export default resolveRoutes;

En la carpeta de Utils/getHash.js
deben de corregir el código corregido:

const getHash = () =>
location.hash.slice(1).toLocaleLowerCase().split("/")[1] || “/”;
export default getHash;

espero que les sirva.

Hay unos pequeños errores.
Primero en getHash.js
En lugar de slide es slice y en lugar de Locate es Locale

const getHash = () => 
	location.hash.slice().toLocaleLowerCase().split("/")[1] || "/";

export default getHash;

Segundo, parece ser que hay un error en el index.HTML. en la etiqueta section debe haber un Id=“content”. En mi caso yo solo tenía la clase content pero faltaba el Id. Les dejo el HTML por si quieren hacer copy & paste

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie-edge" />
		<title>CIENTIFICO</title>
	</head>
	<body>
		<main class="Main">
			<header class="Header" id="header"></header>
			<section id="content">
				<div class="loading"></div>
			</section>
		</main>
	</body>
</html>``

Si al presionar “name” no les parece nada, verifiquen que dentro del template de Home el vinculo este de esta manera (<a href="#/1/">):

 <article class="Character-item">
            <a href="#/1/">
              <img src="image" alt="name">
              <h2>Name</h2>
            </a>
          </article>

¿Cuál es el propósito (en este punto) de utilizar async/await si las funciones Header, resolveRoutes y render realizan operaciones síncronas?

Bueno voy haciendo todo al pie de la letra, aunque entiendo algunas cosas, otras no pero creo que es cosa de practicar, no?

alguien me podria ayudar con este error y por que no me sale name

Tuve un problema al correr la página.
Solamente me salía “Error404” mi error fue un typo en resolveRoutes.js
Tenía escrito:
route.lenght <= 3
En lugar de:
route.length <= 3

Mi typo era en la palabra “length”

Bueeeno cuando le daba click a Name me mostraba error 404… hice todas las recomendaciones de los compañeros de abajo y nada. Me puse a revisar mi código línea por línea y me di cuenta que tenía un lindo typo jaja. En el index.js de la carpeta routes, en el objeto de routes donce declaramos las rutas en el id lo había escrito así:

Me faltaron los : antes de id, debería ser así:

Y listo me funcionó:

tengo el siguiente error en consola 😕

Uncaught (in promise) TypeError: location.hash.slide is not a function
at getHash (getHash.js:2)
at router (index.js:24)

este e sel codigo de getHash.js

const getHash = ( ) =>
    location.hash.slide(1).toLocaleLowerCase().split('/')[1] || '/'

    export default getHash

y este re routes

import Header from '../template/Header'
import Home from '../pages/Home'
import Characters from '../pages/Characters'
import Error404 from '../pages/Error404'
import getHash from '../utils/getHash'
import resolveRoutes from '../utils/resolveRoutes'

const routes = {
  '/' : Home,
  '/:id' : Characters,
  '/contact' : 'Contact',

}

const router = async ()=> {

  const header = null|| document.getElementById ('header')
  const content = null|| document.getElementById ('content')

  header.innerHTML = await Header ()

  let  hash = getHash ();
  let route = await resolveRoutes(hash)
  let render = routes[ route] ? routes[route] : Error404
  content.innerHTML = await render()


}

export default router

El error donde no muestra name al cargar la página lo solucione cambiando:
Esto:
location.hash.slice(1).toLocateLowerCase().split(’/’)[1] || ‘/’;
Por esto:
location.hash.slice(1).toLocaleLowerCase().split(’/’)[1] || ‘/’;

Tiene que pasarle route a const resolveRoutes para que se muestre en el DOM.

const resolveRoutes = (route) => {
  if (route.length <= 3) {
    let validRoute = route === '/' ? route : '/:id';
    return validRoute;
  }

  return `/${route}`;
};

export default resolveRoutes;

Aqui dejo el procesa por el que pasa el Hash en cada función.
getHash():

Con .slice(1) quitamos ‘#’, lo pasamos a minusculas, lo convertimos en un array usando ‘/’ como separador con .split(’/’) y finalmente obtenemos el valor con [1]. Podemos obtener ‘about’ o cualquier numero id como se ve en la imagen.
En resolveRoutes checamos si se trata de un id mirando su longuitud. Aqui las posibles salidas son ‘/about’, ‘/’ o si se trata de un id tenemos ‘/:id’. Este valor se alamcena en la variable route y se confirma si hace parte del objeto routes previamente creado y hacemos el respectivo render.

Algo intersante que se ve en esta clase, es que al igualar un variable a una función como las que importamos al inicio del documento, se hace sin ‘()’.

let render = Character

Si colocamos los parantesis, estariamos corriendo la funcion, y la variable recibiria el return de la función, osea recebiria una cadena de texto. Lo que buscamos es injectar esa cadena de texto como codigo HTML. Por eso usamos:

content.innerHTML = await render()```
Con los parentesis

Si no les aparece todo el codigo html al momento de darle en “Name”, lo unico que hay que hacer es cambiar el getHash. Simplemente poniedo

const getHash = () => {
  return location.hash.splice(1)
}

Ya les va a aparecer todo el contenido html al momento de darle name.

Como 3 horas revisando código y corrijiendo typos hasta que logre solucionar los errores que tenía. Les recomiendo bastante que al momento de ver errores relean su codigo y comparen con el del profesor hasta que encuentren alguna anomalía

excelentee

La mia se ve igualita, no aparece nada nuevo, le doy click en el about y no funciona

Necesito ayuda, cuando yo presiono Name, me lleva al error 404 en lugar del menú, ya hice algunos de los consejos que se ven en los comentarios de esta clase, así que decidí abrir el inspector como podrán ver. Les quedo de antemano muy agradecido por los aportes para solucionar este problema.

A mi se sale ERROR 404!

A mi no me funcionaba por que no puse el parametro route en resolveRoutes

const resolveRoutes = (route) => {

    if (route.length <= 3) {
        let validRoute = route === '/' ? route : '/:id'
        return validRoute
    }
    return `/${route}`
}

export default resolveRoutes

Hay muchas cosas que no entiendo. ¿¿¿Que cursos me recomiendan tomas para poder comprender ese curso??

woo no conocia eso del hashchange y por lo q veo es la base fundamental para las single page app, antes solo me preguntaba como era posible… Genial, gracias Platzi 💚

Continuamos,

Vamos bien hasta el momento 😃 Todo se ejecuta Ok.

Definitivamente, era un error en el index.html, que era? nunca lo supe, solo volvi a hacerlo !!

Hola segun mi consola todo compila, pero no me muestra nada. ALguien me puede decir que pasa?

Me va quedando así 👏🏼

const routes={
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
}

const router = async()=>{
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML=await Header();
    let hash = getHash();
    let route = await resolveRoutes(hash);
    let render = routes[route] ? routes[route] : Error404;
    content.innerHTML(render);
};

En realidad re-escribir el index.html sí funciona para solucionar el error de que no aparezca Name

AL correr el proyecto en vez de name me aparecía error 404, revisé el código varias veces y corroboré que todo esté ok, simplemente detuve el npm run start y lo volví a correr y funcionó.

No me aparecía nada de nada y después de buscar y buscar…recordé que debía dar en consola npm run start. Lo estaba abriendo en el visual studio code y por eso no veía nada.![](

Otra manera de mostrar el render

let render = routes[route] ?? Error404;  

es una simplificación del operador ternario que retorna el mismo valor que esta evaluando como primera opción

routes[route] 

sino retorna el segundo valor

Error404

Veo que no funciona si en los links sacamos el hash, alguien sabe por que? Por ejemplo en about se rompe todo si dejo solo “about/”

Para las personas que estén realizando este proyecto usando TS, cuando tengan este problema:

La solución que le encontré es crear una interfaz que le indique al objeto (routes) que cuando haga uso de su índice, haya un contrato de lo que, qué es lo que debe recibir como índice y qué es lo que debe retornar:

Si el retorno es una función que retorna un string “() => string” está todo ok, pero si es distinto a eso, entonces haya un error, por ejemplo:

Fuente: Página Oficial TS

A mi me funcionó de esta manera, 03/ago/2024 `const getHash = () => {  const hash = location.hash.slice(1).toLocaleLowerCase(); // Remover el primer carácter (#) y convertir a minúsculas  return hash.split("/")[1] || "/"; // Para verificar que el hash se obtiene correctamente};` `export default getHash;`

Hasta el momento, webpack me ha dado mas problemas que ayuda o soluciones.

solo por si las moscas si tienes un [objec.promise] es por que te hase falta un (await)

Genial

Sin errores! A seguir 😄

No me funcionaba por el parámetro hash del addEventListener del index.js de la carpeta source. Así lo dejé:

window.addEventListener('hashchange', router);

Documentación MDN

Wenas a tod@s;

Despues de toda una mañana, encontre el error en el typo del Header.js.

Ojo con los typos!!!

De aquí en adelante se vuelve confuso

ACOTACIPIÓN

Si por a o b decidiste ponerle el corchete a la arrow function, no olvides poner el return, de los contrario te lanzara undefined.

Ejemplo:

const getHash = () => {
    return location.hash.slice(1).toLocaleLowerCase().split("/")[1] || '/';
};

revise 2 veces cada archivo que había en src y el de webpack y algunos los vi 3 veces para asegurarme del porque no podia interactuar con “Name” para darme cuenta a la 4 ves que revise el archivo home.js
que puse </a></a> y no <a></a> xd

f