Uso de Hash Router en Aplicaciones Web con React Router DOM

Clase 5 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Qué tipos de router ofrece React Router DOM?

En el fascinante mundo del desarrollo web, React Router DOM nos ofrece tres tipos de routers: browser router, hash router y memory router. Cada uno de ellos tiene un propósito específico y una manera particular de gestionar la navegación, lo que influye en cómo se estructuran y gestionan las rutas en diferentes escenarios.

¿Cómo funciona el browser router?

El browser router sigue la forma normal de navegación que encontramos en la mayoría de las páginas web. Si alguna vez has navegado por sitios como Platzi o Netflix, habrás notado que las URLs están estructuradas con barras inclinadas (slashes) para separar rutas como /home, /blog o /contact. Este tipo de router muestra la ruta completa en la barra de direcciones y es ideal para aplicaciones web que requieren rutas visibles y manejables directamente por el navegador.

Ventajas: Permite una navegación más natural y amigable para el usuario, imitando el comportamiento común de los navegadores.
Desventajas: No es recomendable para todas las situaciones, especialmente para aplicaciones hosteadas sin control sobre el backend.

¿Qué es el hash router?

El hash router utiliza el símbolo de hash ('#') después del dominio en la URL para gestionar las rutas. Así, una URL podría verse como example.com/#/ruta/blog. Este método es particularmente útil cuando se desea implementar rutas en una sola página (Single Page Application) sin intervención del servidor para cada cambio de ruta.

Ventajas: Permite mantener la misma página HTML al cambiar las rutas, lo que es perfecto para aplicaciones hospedadas en sitios como GitHub Pages.
Desventajas: La URL puede parecer menos profesional o estética debido a la inclusión del símbolo '#'.

¿Para qué se utiliza el memory router?

El memory router es ideal para aplicaciones que no dependen de URLs navegables, como las aplicaciones móviles. Su funcionamiento se basa en mantener un array en memoria que rastrea las rutas, sin mostrar ninguna URL específica al usuario.

Ventajas: Perfecto para entornos que no dependen de URLs, como aplicaciones móviles o entornos de pruebas.
Desventajas: No apto para aplicaciones web tradicionales que requieren URLs definidas en el navegador.

¿Cuándo usar hash router sobre browser router?

La elección entre hash router y browser router radica en el entorno de despliegue de tu aplicación. Si el proyecto se aloja en un entorno como GitHub Pages, donde no puedes controlar el backend, el uso de hash router se convierte en una solución imprescindible.

¿Por qué elegir hash router en GitHub Pages?

GitHub Pages no permite modificaciones en el servidor para gestionar una aplicación con un browser router; cualquier ruta no encontrada directamente en el repositorio resultará en un error 404. Utilizando el hash router, se puede "engañar" al sistema para que siempre rinda el mismo index.html, independientemente de la ruta siguiente al '#'.

Ventajas: Permite tener una aplicación completamente funcional en GitHub Pages, gracias a que todas las rutas internas se gestionan en el frontend.
Alternativas: Si tienes control sobre el backend, puedes configurar tu servidor para gestionar rutas de aplicación única que siempre devuelvan el mismo HTML principal.

¡Continúa aprendiendo!

El mundo del routing en React puede parecer complejo, pero con una comprensión sólida de los conceptos, estarás mejor preparado para enfrentarte a cualquier desafío de desarrollo web. Los diferentes tipos de router tienen sus propios casos de uso y ventajas, por lo que seleccionar el adecuado para tu proyecto es clave. Ahora que manejas estos conceptos, ¡lánzate a experimentar y a desarrollar aplicaciones que luzcan y funcionen impecablemente!

Andrés Esteban Rodríguez Jiménez

student•

BrowserRouter vs. HashRouter

React Router Dom 6 tiene 3 tipos de Routers:

Browser Router: Su navegación funciona por medio de los Slash / que indican en que página de la aplicación estamos. Este lo usamos si tenemos una ubicación de otro HTML cargado en el backend, si no lo encuentra retorna un Error 404.
Hast Router: Su navegación funciona por medio de los Slash Hashes y Slash /#/, esto nos puede servir para renderizar contenido guiándonos con los hash gracias a JavaScript. Este no nos saca del index.html, esto nos sirve para crear páginas SPA.
Memory Router: Funciona por medio de un Array de rutas que nos indica en que ruta estamos y renderizar ese contenido. Se suele usar para aplicaciones móviles para cambiar de vistas.

Jhon Eduard Bocanegra Ortiz

student•

HashRouter: Si usamos solo frontend BrowserRouter: Si usamos frontend y backend

Federico Ivan Llano

student•

muy bueno gracias! :D

Jose Tellez

student•

Este comentario está increible, qué buena frase para resumir

David Condori Quispe

student•

BrowserRouter utiliza la history API de HTML5 para renderizar los componentes. Esto permite mantener las rutas limpias (sin símbolos) pero necesita funcionar en conjunto con el servidor, lo cual en algunos casos puede hacer más complejo el desarrollo.

HashRouter en cambio utiliza el hash (#) en la URL para renderizar los componentes, lo cual evita que el navegador envíe una petición al servidor solicitando la ruta actual cuando se quiere hacer refresh o compartir un link.

Post completo

Nicolás Chamorro Girón

student•

++Browser Router++: si utilizamos esta técnica de navegación, tendremos URLS mas limpias y un pequeño impacto en el SEO por url amigables, para trabajar esto en producción en un servidor real que no corra con node.js, toca hacer una configuración adicional para indicarle que independientemente la ruta que este navegando, el servidor renderice el index.html; lo que previene el tipico 404 NOT FOUND y a su vez el router gestiona la ruta como es debido mostrando el page configurado.este tipo de configuraciones se hacen vuelvo y reitero en servidores que no corran con node, dejare unos ejemplo de configuracion para 2 tipos de servidores mas tipicos: (deben de estar ubicados en la carpeta publica del servidor)

Apache ( se configura en el archivo .htaccess)

<code>
 RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule .index.html [L]
</code>

IIS ( se configura en el archivo .web.config ) (toca instalar el plugin de rewrite)

<code> 
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
</code>

Felipe Morales Torres

student•

Siento que el profe se va a dislocar el hombro cada que hace el símbolo del slash / 😂

Mariano Gastón Paduani

student•

jajajajaja

Ignacio Basilio

student•

BrowserRouter:
- Utiliza solo los slash (/) para renderizar la ruta.
- /slug
- Se utiliza cuando podemos usar varios HTML’s en nuestro proyecto.
HashRouter
- No solo utiliza el slash, sino que antes tiene un hashe entre dos slashes, eso antes de la ruta (/#/).
- /#/slug
- Se utiliza normalmente en los SPA.
MemoryRouter
- Funciona por medio de un Array de rutas, normalmente no se usan en web.

Harold Zurita Simon

student•

BrowserRouter vs. HashRouter

. React router DOM en su versión 6 tiene 3 tipos de router: .

Browser Router: Funciona de la forma normal /slug. Es decir que utilizamos los slash / y algo más para indicar la ruta que queremos acceder. .
Hash Router: Funciona de la forma /#/slug. En vez de tener directamente el slash al principio de la diferencia de todas las rutas con las unas con otras, primero tendremos un hashtag # al principio de la url y luego empezamos a poner los slash y el resto de rutas. .
Memory Router: Funciona en base a la fe. Este router o provider va a tener un array que nos dice en qué ruta estamos. Lo que sea que tenga en memoria o en ese array de routers, esa será la ruta que rendericemos, no hay una url que nos diga donde estamos. Se puede utilizar para aplicaciones móviles, porque evidentemente las aplicaciones móviles nativas no tienen una url, se puede navegar y dependiendo de la interacción que tengamos vamos a estar en una ruta u otra. Como no hay una url tiene que ser en memoria.

. La diferencia crucial entre Browser Router y Hash Router es que los hashes podemos leerlos desde javascript, desde el frontend y pues guiarnos por hash para saber que ruta renderizar en vez de tener la locación completa o endpoint. . Para web es común utilizar el Browser Router o el Hash Router, sin embargo hay una alternativa más a React Router DOM que es React Navigation. Esta es muy popular en aplicaciones móviles para React Native. . La razón por la que utilizamos Hash Router se debe a que al desplegar una aplicación en github pages, nosotros no tendríamos el control sobre el backend que decide qué renderizar para nuestro frontend. . Es decir, cuando entramos a la ruta principal de nuestra aplicación, por ejemplo user.github.io/curso-react; la ruta principal donde vive nuestra aplicación es ese index.html que generamos gracias a React que tiene código javascript, un script y un bundle donde está todo el código para que funcione nuestra aplicación. . Si a esta ruta le aumentamos navegación, por ejemplo user.github.io/curso-react/blog; entonces como github pages tiene su propio backend y no encuentra ninguna carpeta de blog, ni un archivo blog.html, pues entonces nos va devolver un 404. . Básicamente, lo único que sabe github pages es que existe un archivo index.html, una vez que lo haya encontrado y entramos a esa ruta, vamos a renderizar ese archivo. . Si cambiamos la ruta con slashes no va a funcionar, en cambio debemos de utilizar el Slash Navigation el cual nos permite eludir el poco control del backend que se tiene. Por lo cual, le decimos que siempre nos renderice el mismo index.html, sin embargo voy a poner algunos hashes que no van a significar una ruta diferente sino que voy a tener distintas rutas con base en el hash. . Entonces si a esta ruta le ponemos un slash user.github.io/curso-react/#/slug, ya no importa que le ponemos después del slash, eso ya no va a ser una ruta diferente, sino que va a cambiar el hash manteniendo el mismo index.html porque estamos trabajando con una SPA y no tenemos control sobre el backend. . En caso de no utilizar github pages, teniendo una SPA en realidad desde el backend no voy a renderizar el contenido. Simplemente voy a tener la API y voy a renderizar siempre al mismo index.html, por lo que mi backend ya está configurado para que todas mis rutas excepto las del API siempre rendericen el mismo html y por lo tanto con el código javascript va a poder leer la ruta sin que nos salga el 404.

Remix Zapata

student•

HashRouter VS. BrowserRouter VS. MemoryRouter

Aunque los 3 hacen los mismo, tienen un diferente caso de uso.

HashRouter: Se usa especialmente para cuando tengas que hacer tu aplicación, pero sin usar backend, solo frontend.

Su Modo de uso es: /#/home

BrowserRouter: Este es el más usado, y el más cómodo si haces una aplicación completa, tanto frontend y backend.

Su Modo de uso es: /home

MemoryRouter: Este es el más extraño porque, tu aplicación va a empezar a cambiar de ruta pero sin modificar la url y, exacto, ¡es lo mismo como sucede en una aplicación móvil!

Su Modo de uso es: / para todas las rutas

Stiven Andres Medina Lopez

student•

Alguien podria indicarme la diferencia entre <BrowserRouter> y createBrowserRouter?

Juan Castro

teacher•

Son equivalentes, la diferencia es la forma en que se definen las rutas (en JSX vs. en objetos): https://reactrouter.com/en/main/routers/create-browser-router

Carlos Rodríguez

student•

Hola profe, si tengo una aplicación separada una parte backend con las api para que el frontend las consuma, entonces si utilizo el BrouserRouter tendré problemas? Si es sí, como se soluciona sin usar el HashRouter?

Rodrigo Ramos Xochiteotzin

student•

Yo creo que si mantienes los repos separados no tendrías por qué tener problema. Sería una especie de microservicios donde cada uno opera en un puerto distinto (local) o dominio distinto (deploy). Cada servicio tendría sus endpoints propios y desde el front podrías hacer peticiones con fetch o axios a tus endpoints del backend sin problema.

Bueno, así yo le he hecho en proyectos tanto personales como de trabajo.

Carlos Rodríguez

student•

Gracias @rdrx

Jorge Arias Argüelles

student•

React Router DOM 6: Manejo de rutas en aplicaciones React.
Tipos de Router:
- Browser Router: URLs limpias con slashes (ej. /blog).
- Hash Router: URLs con hash (ej. /#/blog), útil en despliegues sin control del backend.
- Memory Router: Navegación basada en estado interno, ideal para aplicaciones móviles.
Uso de Hash Router: Permite despliegues en plataformas como GitHub Pages sin problemas de 404 por rutas no encontradas.
Alternativas: React Navigation para React Native.

David Esteban Giraldo Duque

student•

Actualmente también existe el StaticRouter, que sirve para SSR.

Javier Silva Avendaño

student•

Para entenderle mejor a la teoría de esta clase, les recomienda esta clase de jonmircha React Router en youtube, esta un poquito larga pero el concepto queda bastante claro.

brayan zamora

student•

Tipos de routers

Browser Route: /slug (cuando no tenemos control del back) Hash Router: /#/slug (el hack) Memory Router: ¿tener fe?

Miguel Giraldo Duque

student•

En [[React router]] son 3 tipos de rutas que podemos usar en nuestras aplicaciones :

- **Browser router** : / Con esta barra dividimos los links de la interfaz por https:miguelito/inicio/contacto par dividir las pantallas esto viene con la desventaja de cuando desplegamos la aplicación en github pages por ejemplo , si el github pages no encuentra ningún archivo o carpeta que coincida con el nombre de la ruta nos daría un error

- **Hash router** : /#/ Cumple la misma función de crear división y navegación en la interfaz , con la diferencia que nos permite indicar que siempre queremos renderizar un mismo HTML funcionando con el single page aplication .

- **Memory router** : Nos permite guardar en memoria las rutas , pero no nos especifica de forma especifica en cual nos encontramos es útil para aplicaciones de celular donde la ruta no es necesaria que sea visible.