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