A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Implementar y probar las conexiones

10/16
Recursos

Aportes 48

Preguntas 23

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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

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=鈥渃ontent鈥. 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>``

驴Cu谩l es el prop贸sito (en este punto) de utilizar async/await si las funciones Header, resolveRoutes y render realizan operaciones s铆ncronas?

Si al presionar 鈥渘ame鈥 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>

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

Tuve un problema al correr la p谩gina.
Solamente me sal铆a 鈥淓rror404鈥 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 鈥渓ength鈥

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 鈥淣ame鈥, 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 鈥榓bout鈥 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] || 鈥/鈥;

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 鈥渁bout/鈥

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鈥ecord茅 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 [email protected];

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 鈥淣ame鈥 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

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

De aqu铆 en adelante se vuelve confuso