Conectar las rutas con los templates

• En el video, min 02:12 tiene un typo. debio escribir slice en vez de slide

• En el min 02:37 otro typo. debio ser toLocaleLowerCase.

Asi que tu funcion correctamente escrita debe quedar asi:

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

Donde

• location.hash trae el fragmento de la url a partir de donde encuentre un #. En este caso traería #/1/
• .slice(1) corta la url y muestra a partir del primer elemento. En este Caso el resultado es /1/
• .toLocaleLowerCase() convierte a minúscula la cadena
• .split(’/’) separa la cadena en un array, y elimina el / quedando un espacio vacio Ej [’’, ‘1’ ,’’]
• [1] trae el primer elemento del split anterior que en este caso es 1 (representa la id 1)

@gndx

una explicacion del HASH.
El hash es el contenido de una url que parte desde el signo de numero(#). Ej:

Código :

Url: http://www.example.com/index.html#algo-aqui
Hash: #algo-aqui

La forma más común de utilizarse y que quizás mucho ya conocen es la de hacer un scroll en la pantalla a la etiqueta HTML con esa ID asignada.

Si en la url el hash indica, por ejemplo… #4 (http://www.dominio.com/pagina.html#4); el navegador desplazará la pantalla hasta el elemento qué posea ese ID. Aquí tienen un ejemplo para que quede claro.

Hash con javascript

La forma de obtener el hash con javascript es la siguiente:
Código :

window.location.hash;
Sería práctico almacenarlo en una variable si lo vas a utilizar.
Código :

var jash = window.location.hash;

También puede buscar específicamente el id con una expresión regular de esta manera, conociendo expresiones regulares, me parece más legible que haciendo split y slice.

const getHash = () => location.hash.replace(/#\/(\d{1,2})\/?/, "$1").toLowerCase() || '/'

En mi caso yo lo estoy haciendo con una API mía y busco nombres, por lo que necesité esta expresión regular:

const getHash = () =>
 location.hash.replace(/#\/([a-z]+-?[a-z]+)\/?/, "$1").toLowerCase() || '/'

Los invito a tomar el curso de expresiones regulares si quieren conocer todas sus bondades ^^

algo anda mal, no tengo errores

Para los que no conocían(como yo) el uso de un if ternario les dejo info encontrada en MDN.

Sintaxis:
condición ? expr1 : expr2
Ejemplo usado en este caso:
Condición: route === '/'
Si se cumple mostrará: route
Si NO se cumple mostrará: ‘/’

Espero haber ayudado. 😄

Queridos, las function getHash tiene un par de errorcitos ortográficos.

1. En vez de:
   location.hash.slide(1) debe ser: location.hash.slice(1)
2. En vez de:
   toLocateLowerCase() debe ser: toLocaleLowerCase()

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

Explicare lo importante de esta funcion:

location.hash.slice(1).toLocaleLowerCase().split('/')[1]|| ' / '

1. Location es parte del objecto window. Location tiene el atributo hash.

http://localhost:8080/#/1/

• el hash “#/1/” cambia cuando damos clic en el elemento de ancla, cuando interactuamos con el Html de Home.

 <a href="#/1/">NAME </a>

1. Slice(parametro1, parametro2) puede tener dos parametros para delimitar el corte de un ARRAY o en este caso string.

const location.hash= "#/1/";
hash.slice(1)
//resultado = "/1/"

• en este caso se corta desde el indice [1] del array hasta el final del array

1. toLocaleLowerCase() creo que cumple la misma funcion que toLowerCase()

 toLocaleLowerCase()===toLowerCase

4.split() devuelve un array divido por el parametro de string seleccionado .

const location.hash.slice(1).toLocaleLowerCase()= "/1/";
const.split("/");
//resultado ["", "1", ""]

5.Finalmente [1] selecciona el numero del HASH que podemos devolver

const anterior = ["", "1", ""];
anterior[1] =1;

Les comparto unos apuntes sobre la función getHash y es slice* y locale*:

A alguien le pasa que no esta aprendiendo nada, solo a copiar código?

Parece que el profe se olvido que tiene que explicar los temas y no solo lanzarlos.

Ojo, entiendo lo que dice, pero porque he visto todos los cursos anteriores; sin embargo no veo hasta ahora ningún esfuerzo por enseñarnos, sino que mas bien por escribir código rápido.

Ya encontré el error. @oscar tu escribiste toLocatelLowerCase y es toLocaleLowerCase quedando ahora así:

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

export default getHash

Esto es para todos los demás compañeros.

Si examinamos window.location obtenemos lo siguiente

Cuando el profe Oscar agrega el .hash hace relación a la propiedad del objeto hash;

para luego aplicar un .slice(1) indicando que en la posición 1 del array da inicio al nuevo array que retorna,

al final se separa la cadane en cada caracter "/"

la función getHash retornara implicitamente la posición [1] del array que se segmento || ó el Home.

Resumen de la clase:

Conectar las rutas con los templates

Nos movemos a la carpeta utils y creamos un archivo llamado getHash.js

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

export default getHash;

Donde

• location.hash trae el fragmento de la url a partir de donde encuentre un #. En este caso traería #/1/
• .slice(1) corta la url y muestra a partir del primer elemento. En este Caso el resultado es /1/
• .toLocaleLowerCase() convierte a minúscula la cadena
• .split(’/’) separa la cadena en un array, y elimina el / quedando un espacio vacio Ej [’’, ‘1’ ,’’]
• [1] trae el primer elemento del split anterior que en este caso es 1 (representa la id 1)

Creamos un archivo llamado resolveRoutes.js

const resolveRoutes =  (route) => {

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

    return `/${route}`; // /about
}

export default resolveRoutes;

Luego importar dentro de route/index.js los dos archivos creados anteriormente.

import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';
import getHash from '../utils/getHash';
import resolveRoutes from '../utils/resolveRoutes';

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

// Creamos el router

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

    header.innerHTML = await Header();
    
}

export default router;

a

¿Por qué toLocaleLowerCase y no simplemente toLowerCase?
Porque toLocaleLowerCase se basa en la ubicacion de mi servidor por ende respetará la forma de usar numeros en esa zona por ejemplo en America se usa la coma para separar la unidad de mil, mientras que en latinoamerica se usa el punto etc.

Adjunto mi codigo.

getHash:

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

export default getHash

index del router:

import Header from '../templates/Header'
import Home from '../page/Home'
import Character from '../page/Character'
import Error404 from '../page/Error404'
import getHash from '../utils/getHash'
import resolveRoutes from '../utils/resolveRoutes'

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 = await render()
}

export default router

Location es un elemento del navegador. representa la ubicación (URL) del objeto al que esta vinculado. Los cambios hechos en ella son reflejados en el objeto al cual está relacionado. Ambas interfaces, Document y Window tienen una interface Location asignada, accessible desde Document.location y Window.location respectivamente.

• Location.hash
  Es un DOMString que contiene un ‘#’ seguido por el fragmento identificador de la URL.

Para obtener el hash

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

export default getHash;

resolveRoutes

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

export default resolveRoutes;

![](

Para el que no le funcione el dev-server es porque hay un problema de versiones.

<He aquí varias soluciones> 

El operador condicional ternario también puede ser anidado, lo que nos permitiría que toda la función resolveRoutes pueda ser expresada en una sola línea:

const resolveRoutes = (route) => route.length <= 3 ? (route === '/' ? route : '/:id') : `/${route}`;

// returning one element, not need brackets
const getHash = () => 
location.hash.slice(1).toLocaleLowerCase().split('/')[1] || '/'; // ['', '1', '']

export default getHash;```

Se me presenta el siguiente error.

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

No he podido avanzar.

muy buena la clase 😄 sigamos 😄

Tuve el mismo resultado con:

const getHash = () => 
// location.hash.slice(1).toLocaleLowerCase().split('/')[1] || '/';
  location.hash.slice(2, -1).toLocaleLowerCase() || '/';

export default getHash;

const resolvesRoutes = (route) => {
    // validating the route / or id
    if (route.length <= 3) {
        let validRoute = route === '/' ? route : '/:id';
        return validRoute;
    }
    return `/${route}`; // /about
};

export default resolvesRoutes;

Según los comentarios de la comunidad, getHash tiene errores en “slide” por “slice” y “locate” por “locale”.

Mis notas sobre la función “getHash()”

const getHash = () =>
    location.hash.slice(1).toLocaleLowerCase().split('/')[1] || '/';
//Primero obtenemos el "hash" con location.hash
//el "hash" sería la parte de la URL que viene después del símbolo #
//En este caso sería algo así: #/id/ o #/about/
//con .slice() eliminamos el primer elemento (#)
//volvemos todo minuscula con .toLocaleLowerCase()
//con .split('/') hacemos que nuestra cadena de texto se vuelva un arreglo eliminando el slash (/)
//luego de esto nos quedaría algo así: '', id, ''
//finalmente obtenemos el segundo elemento del arreglo con el [1]

export default getHash;

Excelente!

resolveRooutes.js

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

export default resolveRoutes;```

Hay muchas cosas de javascript que no conozco.
Se me esta complicando este curso.

para efectos académicos

function getHash() {
	// Return the anchor part of a URL. 
	//Assume that the current URL is www.example.com/test.htm#part2: 
	// The result of x will be: #part2
	const hash = location.hash
	// El método toLocaleLowerCase() retorna la cadena de texto desde la que 
	//se llama convertida en minúsculas, de acuerdo con cualquier localización 
	//específica de correspondencia de mayúsculas y minúsculas.
	const withoutHash = hash.slice(1).toLocaleLowerCase()
	const splited = withoutHash.split('/')

	return splited[1]
}

export default getHash```

a 1.000 por hora

Debería ser de esta manera, hay algunos errores en el video, como slice en vez de slide y Locale a cambio de Locate.

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

export default getHash;

Probando en consola el metodo getHash, sería algo como:

¿que es el hash?