Uso de Hash Router en Aplicaciones Web con React Router DOM

Elegir el tipo de router correcto en React Router DOM puede marcar la diferencia entre una aplicación que funciona perfectamente en producción y una que muestra errores 404 inesperados. Entender cómo funciona cada variante es fundamental para cualquier proyecto con React.

¿Qué tipos de router ofrece React Router DOM versión 6?

React Router DOM en su versión 6 proporciona tres tipos de router que actúan como provider de la aplicación [0:20]:

• Browser Router: funciona de la forma convencional con slashes en la URL. Es el patrón que usan la mayoría de aplicaciones web, como platzi.com/blog o platzi.com/cursos.
• Hash Router: en lugar de diferenciar rutas directamente por slashes, antepone un símbolo # (hash) en la URL. El resultado sería algo como platzi.com/#/blog o platzi.com/#/cursos [1:05].
• Memory Router: no depende de la URL ni de slashes ni de hashes. Almacena la ruta actual en un array en memoria, sin reflejarla en la barra de direcciones [2:05].

El Memory Router resulta especialmente útil para aplicaciones móviles con React Native, donde no existe una URL visible en el navegador [2:30]. La navegación se resuelve internamente, confiando en lo que el router tenga almacenado en memoria.

¿Cuándo conviene usar Memory Router en lugar de los demás?

Cuando trabajas con aplicaciones nativas o entornos donde no hay barra de direcciones, el Memory Router es la opción lógica. Herramientas como React Navigation cumplen una función similar y son incluso más populares que React Router DOM en el ecosistema de React Native [3:05]. Aunque React Navigation tiene sus propias versiones y complejidades, dominar los fundamentos de enrutamiento permite adaptarse a cualquier herramienta.

¿Por qué elegir Hash Router sobre Browser Router en la web?

Si tu aplicación se despliega como una single-page application (SPA) en servicios como GitHub Pages, el Browser Router puede generar problemas graves [4:15].

El motivo está relacionado con el concepto de server side rendering versus single-page applications. Cuando despliegas en GitHub Pages, no tienes control sobre el backend. El servidor de GitHub Pages solo conoce los archivos que existen en tu repositorio. Si un usuario accede directamente a una ruta como /blog, el backend busca una carpeta o archivo llamado blog.html y, al no encontrarlo, devuelve un error 404 [4:50].

Con el Hash Router, la estrategia cambia por completo:

• El backend siempre sirve el mismo index.html, sin importar qué haya después del #.
• El hash es información que el servidor ignora, pero que JavaScript puede leer desde el front-end [5:40].
• Esto permite tener múltiples rutas visibles para el usuario, aunque el servidor solo entregue un único archivo HTML.

¿Cómo funciona la navegación por hash a nivel técnico?

Cuando usas Hash Router, estás hackeando el sistema de forma elegante [5:25]. Le dices al backend: "siempre entrégame el mismo index.html", y desde JavaScript lees el fragmento después del # para decidir qué componente renderizar. El servidor nunca interpreta esa parte de la URL como una ruta diferente.

En cambio, si usas un servicio de deploy donde sí controlas el backend, puedes configurarlo para que todas las rutas (excepto las de la API) devuelvan siempre el mismo index.html [6:10]. En ese escenario, el Browser Router funciona perfectamente porque el servidor está preparado para manejar cualquier ruta sin devolver un 404.

¿Cuál es la mejor opción para desplegar en GitHub Pages?

Para proyectos que se van a desplegar en GitHub Pages, la recomendación es utilizar el Hash Router [6:45]. De esta forma, la aplicación puede manejar múltiples rutas sin depender de configuraciones especiales en el servidor.

Los puntos clave para tomar esta decisión son:

• Si no controlas el backend, usa Hash Router.
• Si controlas el backend y puedes configurar un fallback al index.html, usa Browser Router.
• Si trabajas en mobile o entornos sin URL, usa Memory Router.

Entender la relación entre el tipo de router, el modelo de despliegue y el control sobre el servidor es lo que permite tomar decisiones informadas en cualquier proyecto con React Router DOM. ¿Has tenido problemas con rutas 404 al desplegar una SPA? Comparte tu experiencia en los comentarios.