Navegación entre páginas y Astro.url

Enlazar es, sencillamente, un ancla

Para enlazar no necesitas ningún componente del framework ni ninguna API: un elemento <a> con su atributo href es todo.

---// src/pages/index.astro---<nav>  <a href="/">Inicio</a>  <a href="/blog">Blog</a>  <a href="/about">Sobre mi</a></nav>

Esta sencillez es una postura, no una carencia. Los frameworks orientados a aplicación envuelven cada enlace en un componente que intercepta el clic para navegar sin recargar; Astro parte del enlace nativo y deja esa mejora como una capa opcional. Si más adelante quieres transiciones sin recarga, activas el <ClientRouter /> de las View Transitions y los mismos <a> empiezan a navegar como una SPA, sin reescribir un solo enlace. La base es estándar; la mejora, aditiva.

Rutas absolutas de raíz y relativas

El valor de href admite dos formas, y confundirlas es la causa más común de enlaces rotos. Una ruta absoluta de raíz empieza por barra y se resuelve siempre desde la raíz del sitio, sin importar en qué página estés. Una ruta relativa no empieza por barra y se resuelve contra la URL actual, como una dirección tomada desde donde estás parado.

• href="/blog/primero" apunta siempre a la misma URL, la escribas donde la escribas.
• href="primero" desde /blog lleva a /blog/primero; desde /docs, a /docs/primero.

La regla práctica para enlaces internos es preferir rutas absolutas de raíz: son estables, no dependen de la página que las contiene y sobreviven a que muevas el fichero que las incluye. Las rutas relativas brillan en casos concretos —enlazar a un hermano dentro de la misma sección— pero su fragilidad ante reorganizaciones las hace mala opción por defecto.

Astro.url: la petición hecha objeto

Dentro de cualquier página, Astro expone Astro.url: una instancia del objeto URL estándar que describe la dirección que se está sirviendo. No es una cadena, es un objeto con las partes ya diseccionadas, lo que te ahorra parsear a mano.

---const ruta = Astro.url.pathname;        // '/blog/primero'const origen = Astro.url.origin;        // 'https://midominio.com'const query = Astro.url.searchParams;   // acceso a los parametrosconst esBlog = ruta.startsWith('/blog');---<body data-activo={esBlog}>

Con Astro.url.pathname marcas el enlace activo de un menú comparando rutas; con searchParams lees parámetros de consulta; con origin compones direcciones absolutas. Junto a él viven Astro.site —la URL canónica que declaraste en la configuración— y Astro.request, el objeto Request completo si necesitas cabeceras o método.

El uso más frecuente de pathname es marcar en qué sección está el visitante. Un componente de navegación compara la ruta actual con la de cada enlace y señala el que coincide, idealmente con aria-current para que también lo anuncien los lectores de pantalla.

---// src/components/Nav.astroconst rutas = [  { href: '/', texto: 'Inicio' },  { href: '/blog', texto: 'Blog' },];const actual = Astro.url.pathname;---<nav>  {rutas.map((r) => (    <a href={r.href} aria-current={actual === r.href ? 'page' : undefined}>      {r.texto}    </a>  ))}</nav>

Fíjate en que la comparación es contra pathname, no contra la URL entera: así ignoras la query y el origen, que no deberían decidir si un enlace está activo. Cuando la lógica se complica —resaltar la sección aunque estés en una subruta— basta con cambiar la igualdad estricta por un actual.startsWith(r.href), y sigues trabajando con una simple cadena.

Construir URLs sin cometer errores

Concatenar cadenas para formar URLs —pegar prefijos y rutas a mano— es una fuente clásica de barras dobles y segmentos perdidos. El objeto URL resuelve esto: su constructor toma una ruta y una base, y aplica las mismas reglas que el navegador. Astro lo aprovecha para tareas tan comunes como la etiqueta canónica.

---// URL absoluta y canonica de la pagina actualconst canonica = new URL(Astro.url.pathname, Astro.site);---<link rel="canonical" href={canonica.href} />

new URL(ruta, base) combina ambas sin que tengas que preocuparte de si sobran o faltan barras, y respeta el subdirectorio del sitio si lo incluyes en la base. Es también la forma correcta de generar enlaces a recursos —imágenes de redes sociales, feeds— cuya URL debe ser absoluta. Delegar en el objeto URL en vez de manipular cadenas elimina de raíz toda una familia de bugs.

La distinción entre enlace interno y absoluto no es capricho, sino contexto. Dentro de tu sitio, una ruta absoluta de raíz basta y es más corta. Pero en cuanto la dirección sale del documento —una etiqueta og:image que lee un servidor de redes sociales, un enlace dentro de un feed RSS que abrirá otro lector, un correo— necesita ser absoluta, con dominio incluido, porque quien la consume no conoce tu origen. La regla se resume así: relativo o de raíz para navegar dentro; absoluto con Astro.site para todo lo que cruza la frontera de tu sitio.