No tienes acceso a esta clase

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

Implementar y probar las conexiones

10/16
Recursos

Aportes 51

Preguntas 24

Ordenar por:

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

o inicia sesión.

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>``

Revise el código y al parecer todo se ve bien no me muestra errores pero igual no me sale Name ni nada de la lista que se le muestra al profe cuando presiona el Name

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?

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

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

Hola, hice el ejercicio con la API de pokemón, hay que hacerlo un poquito diferente pues el primer llamado a la API de pokemon solo nos trae el nombre y una url de la info de cada pokemon, para esto entonces lo que hice fue hacer una lógica para acceder a todos los datos de cada pokemon, dejo y repo para que chequeen : ) https://github.com/amaurysg/SPA-PokeApi

Dejo mi repositorio en el cual podrán encontrar una rama de cada clase.

https://github.com/ivallejo/Cientifico

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ó:

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

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”

Si no obtienen el resultado esperado, revisen en public/index.html, la etiqueta header debe cerrarse antes de los demás elementos.

    <main class="main">
      <header class="header" id="header"></header> <!-- Close!! -->
      <section id="content">
        <div class="loading"></div>
      </section>
    </main>

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.

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

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.

Tengo este error en al consola, ya revise mis lineas de codigo y todo esta correcto
![](

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

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;

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] || ‘/’;

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

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

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/”

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

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

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

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.![](

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?

Vamos bien hasta el momento 😃 Todo se ejecuta Ok.

A mi se sale ERROR 404!

Continuamos,

excelentee

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

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

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ó.

Genial

Sin errores! A seguir 😄

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 💚

Me va quedando así 👏🏼

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.

Wenas a tod@s;

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

Ojo con los typos!!!

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

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

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] || '/';
};

f

De aquí en adelante se vuelve confuso