Configurar la navegación en una aplicación React deja de ser un misterio cuando entiendes cómo funcionan los componentes base de React Router Dom 6. Aquí aprenderás a definir rutas, manejar páginas no encontradas y estructurar tu app para que el menú y el footer convivan con el contenido dinámico, todo usando un proyecto creado con Create React App.

¿Qué componentes necesitas para empezar con React Router Dom 6?

Antes de escribir la primera ruta, importa los tres pilares que sostienen toda la navegación.

• HashRouter: ideal cuando vas a hacer deploy en GitHub Pages, porque evita problemas con las URLs.
• Routes: el contenedor en plural que envuelve a todas tus rutas y decide cuál renderizar.
• Route: el componente en singular que define cada ruta individual con su path y su element.

En versiones anteriores, Routes se llamaba Switch y las propiedades como element se llamaban component o render. Si estás migrando desde una versión vieja, este es el cambio más visible.

¿Cuándo debo usar HashRouter en lugar de BrowserRouter? Úsalo cuando vayas a desplegar en servicios como GitHub Pages que no manejan bien el routing del lado del servidor. El HashRouter agrega un # antes de la ruta para que el navegador no haga peticiones reales al servidor.

¿Cómo se estructura el componente App con rutas dinámicas?

La idea es envolver toda tu aplicación en el HashRouter, que funciona como un provider (igual que React Context, solo que más bonito). Dentro de ese provider colocas lo que quieres que aparezca en todas las páginas, como el menú, y luego defines la zona dinámica con Routes.

jsx <HashRouter>

<Menu /> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/blog" element={<BlogPage />} /> <Route path="/profile" element={<ProfilePage />} /> <Route path="*" element={<NotFound />} /> </Routes> </HashRouter>

Fíjate en algo importante: el componente Route no se abre y se cierra como un contenedor tradicional. Funciona como un self-closing tag que recibe dos propiedades clave: path y element. En element pasas directamente el componente JSX que quieres renderizar.

¿Por qué el menú debe ir dentro del HashRouter?

Esta es una decisión de diseño que evita dolores de cabeza después. Si dejas el menú fuera del HashRouter, ese menú no podrá acceder a la información del provider. Eso significa que no podrás navegar programáticamente desde el menú, ni leer la ruta actual, ni hacer redirecciones cuando implementes autenticación.

Mantén el menú adentro del router pero afuera de Routes, así se renderiza en todas las páginas y a la vez tiene acceso al contexto de navegación.

¿Cómo manejar rutas no encontradas con el asterisco?

El truco del asterisco es una de las gemas más útiles de React Router. Cuando defines un Route con path="*", le estás diciendo: "si ninguna ruta anterior coincidió, renderiza esto".

¿Qué hace el asterisco en React Router? Captura cualquier URL que no haya hecho match con las rutas definidas arriba. Sirve para mostrar una página not found cuando el usuario escribe una ruta que no existe.

El orden importa. Si pones el asterisco al inicio, todas las rutas mostrarán not found porque el match se hace de arriba hacia abajo. Déjalo siempre al final.

¿Cómo crear los componentes de página paso a paso?

Cada página es un componente React común y corriente. Por convención, conviene exportarlos con named exports en lugar de default exports para evitar typos al importarlos en otros archivos.

jsx import React from 'react';

export function HomePage() { return <h1>HomePage</h1>; }

Replica esa estructura para BlogPage.js, ProfilePage.js y un Menu.js que contenga una <navbar> simple. Visual Studio Code te ayuda a importar automáticamente, pero el concepto es el mismo: cada archivo exporta su componente y App.js los consume.

¿Qué pasa con las URLs cuando usas HashRouter?

Aquí viene un detalle que confunde a muchos. Como estás usando hash navigation, las rutas no funcionan escribiendo /blog directamente en el navegador. Tienes que escribir /#/blog para que el router las interprete correctamente.

• La ruta principal es /#/.
• Para entrar a otros endpoints necesitas /#/blog, /#/profile, etc.
• Si escribes algo no definido como /#/cualquiercosa, se renderiza el componente not found.
• Si escribes rutas sin el hash como /blog/lalala, el router las interpreta como ruta principal y muestra el home.

Si cambiaras el HashRouter por un BrowserRouter, no tendrías que preocuparte por los hashes. Las rutas dentro de tu código siguen siendo /, /blog, /profile, sin importar el tipo de router. El provider se encarga de agregar los hashes cuando es necesario.

En la siguiente etapa toca aprender a navegar entre páginas sin cambiar la URL manualmente, usando los componentes Link y NavLink. Cuéntame en los comentarios qué tipo de router elegiste para tu proyecto y por qué.