Browser Router vs Hash Router en GitHub Pages

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:25

Browser Router vs Hash Router en GitHub Pages

Curso de React.js: Navegación con React Router

Clase 5 de 30

Clase 5 / 30

Recursos

Cuando trabajas con React Router Dom v6, te encuentras con tres tipos de routers que cumplen funciones distintas: Browser Router, Hash Router y Memory Router. Saber cuál elegir define cómo se comporta la navegación de tu aplicación y si podrás desplegarla sin errores 404 en servicios como GitHub Pages.

¿Qué tipos de router ofrece React Router Dom v6?

Cada uno responde a un escenario distinto: web tradicional, web sin control de backend o aplicaciones móviles. La diferencia está en cómo gestionan la URL y el estado de la ruta actual [1:00].

¿Cómo funciona el Browser Router?

El Browser Router es el comportamiento normal que ves en la mayoría de sitios. Si entras a platzi.com/blog o platzi.com/cursos, las rutas se diferencian por las barras inclinadas en la URL. Es la opción estándar cuando tienes control sobre el backend que sirve tu aplicación.

¿Cuándo usar Browser Router? Cuando puedes configurar tu servidor para que devuelva siempre el mismo index.html en cualquier ruta, excepto las de la API.

¿Qué hace diferente al Hash Router?

El Hash Router introduce un símbolo # antes de las rutas. En lugar de platzi.com/blog tendrías platzi.com/#/blog. Ese hash se puede leer desde JavaScript en el frontend, y con base en él decides qué componente renderizar [2:30].

La clave aquí es que el navegador y el backend ignoran lo que viene después del #. Para el servidor siempre es la misma ruta, así que nunca se rompe.

¿Para qué sirve el Memory Router?

El Memory Router no usa la URL en absoluto. Funciona con un array interno que guarda en memoria cuál es la ruta actual. No hay una dirección visible que diga dónde estás, es navegación a punta de fe [3:30].

Este router es ideal para aplicaciones móviles nativas o construidas con React Native, donde simplemente no existe una URL que mostrar al usuario.

¿Por qué elegir Hash Router en vez de Browser Router?

La respuesta corta es: cuando no controlas tu backend. Y aquí entra en juego la lógica de las single page applications frente al server side rendering [5:30].

Imagina que despliegas tu app a GitHub Pages. Tu aplicación vive en un único index.html generado por React, con un bundle de JavaScript que contiene toda la lógica. Si un usuario entra directamente a platzi.github.io/curso-intro-react/blog, GitHub Pages busca una carpeta o archivo llamado blog en tu repositorio. Como no existe, devuelve un 404.

¿Por qué GitHub Pages devuelve 404 con Browser Router? Porque su backend busca archivos físicos que coincidan con la ruta, y solo encuentra el index.html original. No sabe que tu app es una SPA.

Con Hash Router, hackeas esa limitación. El servidor siempre sirve el mismo index.html sin importar lo que venga después del #, y tu JavaScript se encarga de leer el hash para mostrar la vista correcta.

¿Existen alternativas a React Router Dom?

Sí, y vale la pena conocerlas para no casarte con una sola herramienta:

React Navigation: la opción más popular para apps móviles con React Native, mucho más que React Router Dom en ese contexto.
React Router Dom v5 y v6: comparten fundamentos pero con APIs distintas, lo que genera conflictos al migrar.
Memory Router dentro del propio React Router Dom: útil si necesitas navegación sin URL incluso en proyectos web, como tests o entornos embebidos.

Si dominas los fundamentos de cómo funcionan los routers, puedes saltar entre versiones y herramientas sin perderte.

¿Cómo se relaciona esto con SPA y SSR?

Una single page application carga un solo HTML y reescribe la vista con JavaScript. El server side rendering, en cambio, devuelve HTML diferente desde el backend para cada ruta. Si tu deploy no soporta SSR ni redirecciones a un index.html común, el Hash Router se vuelve la salida limpia [7:00].

En la próxima clase vas a usar Hash Router dentro de la aplicación que ya tiene React Router Dom 6 instalado con Create React App, y vas a montar la estructura de componentes necesaria para que la navegación funcione sin romperse al desplegar.

¿Ya decidiste qué router vas a usar en tu próximo proyecto? Cuéntame en los comentarios cuál escogiste y por qué.

Harold Zurita Simon

Hace 3 años

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.

Comentarios (16)16 comentarios

Andrés Esteban Rodríguez Jiménez

Hace 4 años

Jhon Eduard Bocanegra Ortiz

Federico Ivan Llano

Jose Tellez

David Condori Quispe

Nicolás Chamorro Girón

Felipe Morales Torres

Mariano Gastón Paduani

Ignacio Basilio

Remix Zapata

Stiven Andres Medina Lopez

Juan Castro

Profesor

Carlos Rodríguez

Rodrigo Ramos Xochiteotzin

Jorge Arias Argüelles

Hace 2 años

David Esteban Giraldo Duque

Javier Silva Avendaño

brayan zamora

Juan Diego Mejia Maestre

Hace 10 meses

Miguel Giraldo Duque

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Browser Router vs Hash Router en GitHub Pages