Crear enlaces ancla en una página web parece algo muy sencillo cuando trabajamos con HTML tradicional. Usamos un enlace con #, añadimos un id a una sección y el navegador se encarga de llevarnos directamente hasta ese punto de la página.
Sin embargo, cuando desarrollamos una aplicación con React y usamos React Router para gestionar la navegación, ese comportamiento puede no ser tan directo. En una SPA, es decir, una aplicación de una sola página, las rutas no funcionan exactamente igual que en una web clásica. El contenido se renderiza desde JavaScript, las páginas no siempre se recargan y el navegador puede no desplazarse automáticamente hasta la sección indicada.
Aquí es donde entra en juego React Router Hash Link, una librería muy práctica para crear enlaces ancla en React cuando trabajamos con React Router. Gracias a su componente HashLink, podemos navegar hacia una ruta concreta y, además, desplazar la vista hasta una sección específica marcada con un id.
En este artículo veremos qué son los enlaces ancla, por qué pueden dar problemas en proyectos con React Router, cómo instalar y usar React Router Hash Link, cómo aplicar smooth scroll y qué buenas prácticas conviene seguir para mejorar la experiencia de usuario en proyectos de desarrollo frontend.
Qué son los enlaces ancla
Los enlaces ancla son enlaces que permiten llevar al usuario directamente a una sección concreta dentro de una misma página. En lugar de cargar una URL completamente nueva, el navegador busca un elemento con un id determinado y desplaza la vista hasta él.
Un ejemplo básico en HTML sería este:
<a href="#contacto">Ir a contacto</a>
<section id="contacto">
<h2>Contacto</h2>
</section>
Cuando el usuario hace clic en el enlace, el navegador busca el elemento con id="contacto" y hace scroll hasta esa sección.
Este tipo de navegación es muy habitual en páginas largas, landings, portfolios, artículos extensos, páginas de documentación, menús internos y secciones de preguntas frecuentes. También resulta muy útil cuando queremos crear una experiencia de navegación más fluida y evitar que la persona tenga que hacer scroll manualmente hasta encontrar la información que busca.
Los enlaces ancla no son solo un recurso técnico. Bien utilizados, ayudan a ordenar mejor el contenido, reducen la fricción y hacen que la interfaz sea más cómoda de usar.
Si estás trabajando la parte visual de una interfaz, este tipo de detalle conecta muy bien con otros recursos de movimiento y transición. Por ejemplo, en esta guía sobre animaciones CSS explico cómo usar el movimiento para reforzar la experiencia sin sobrecargar la interfaz.
Por qué los enlaces ancla pueden fallar con React Router
En una web tradicional, el navegador gestiona los enlaces ancla de forma nativa. Pero en una aplicación desarrollada con React, especialmente si usamos React Router, la navegación se controla desde el lado del cliente.
Normalmente, para movernos entre rutas usamos componentes como Link o NavLink:
import { Link } from "react-router-dom";
<Link to="/contacto">Contacto</Link>
Este enlace no recarga la página completa. React Router intercepta la navegación y renderiza el componente correspondiente según la ruta.
El problema aparece cuando intentamos usar un enlace con fragmento, por ejemplo:
<Link to="/#servicios">Servicios</Link>
En teoría, este enlace debería llevarnos a la ruta principal y desplazarnos hasta el elemento con id="servicios". Pero, en la práctica, puede no funcionar como esperamos.
Esto puede ocurrir por varios motivos:
- El contenido se renderiza después del cambio de ruta.
- El elemento de destino todavía no existe en el DOM.
- React Router gestiona la navegación sin que el navegador ejecute el comportamiento clásico del hash.
- La aplicación tiene una cabecera fija que tapa la sección de destino.
- El scroll se produce antes de que React haya terminado de pintar el contenido.
Por eso, cuando queremos crear enlaces ancla en React de forma fiable, una solución muy cómoda es usar React Router Hash Link.
Qué es React Router Hash Link
React Router Hash Link es una librería que extiende el comportamiento de los enlaces de React Router para permitir la navegación hacia secciones concretas dentro de una página.
Su componente principal es HashLink.
En lugar de usar un Link tradicional:
<Link to="/#contacto">Contacto</Link>
usamos:
<HashLink to="/#contacto">Contacto</HashLink>
La diferencia es que HashLink se encarga de encontrar el elemento correspondiente y desplazar la vista hasta él.
Esto resulta especialmente útil en proyectos donde tenemos una estructura como esta:
- Una landing creada con React.
- Un menú superior con enlaces a distintas secciones.
- Un portfolio con bloques como servicios, proyectos y contacto.
- Una página de documentación técnica.
- Un artículo largo con índice interno.
- Un botón de llamada a la acción que lleva directamente a un formulario.
En todos estos casos, HashLink ayuda a mejorar la navegación interna sin tener que escribir lógica manual con JavaScript.
Cómo instalar React Router Hash Link
Para instalar la librería, puedes usar npm:
npm install react-router-hash-link
O yarn:
yarn add react-router-hash-link
Antes de usarla, asegúrate de tener instalado y configurado react-router-dom, ya que React Router Hash Link trabaja sobre React Router.
Una estructura básica de aplicación podría ser esta:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Navbar from "./components/Navbar";
function App() {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/sobre-mi" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
En este ejemplo, la aplicación está envuelta con BrowserRouter, el menú de navegación se muestra en todas las rutas y cada página se renderiza según la URL actual.
Si estás preparando tu entorno de desarrollo y quieres trabajar de forma más cómoda desde la terminal, también puede ayudarte este artículo sobre atajos y trucos para usar Visual Studio Code desde la terminal en Mac.
Cómo crear secciones con id en React
Para que un enlace ancla funcione, necesitamos que el destino exista en el DOM. Es decir, si el enlace apunta a #servicios, debe existir un elemento con id="servicios".
Por ejemplo:
function Home() {
return (
<main>
<section id="inicio">
<h1>Desarrollo frontend y diseño web</h1>
</section>
<section id="servicios">
<h2>Servicios</h2>
</section>
<section id="proyectos">
<h2>Proyectos</h2>
</section>
<section id="contacto">
<h2>Contacto</h2>
</section>
</main>
);
}
export default Home;
Cada sección tiene un identificador único. Este punto es importante: no deberías repetir el mismo id en varias partes de la página.
Los identificadores deben ser claros, breves y descriptivos. Algunos buenos ejemplos serían:
inicio
servicios
proyectos
contacto
preguntas-frecuentes
sobre-mi
En cambio, conviene evitar nombres poco expresivos como:
section1
bloque-final
caja2
x123
Un buen id no solo ayuda a que el enlace funcione correctamente. También mejora la legibilidad del código y facilita el mantenimiento del proyecto.
Cómo usar HashLink paso a paso
Una vez instalada la librería, podemos importar HashLink desde react-router-hash-link y utilizarlo dentro de nuestro componente de navegación.
import { HashLink } from "react-router-hash-link";
function Navbar() {
return (
<nav>
<HashLink to="/#inicio">Inicio</HashLink>
<HashLink to="/#servicios">Servicios</HashLink>
<HashLink to="/#proyectos">Proyectos</HashLink>
<HashLink to="/#contacto">Contacto</HashLink>
</nav>
);
}
export default Navbar;
Cada enlace apunta a una sección concreta de la página principal.
Por ejemplo:
<HashLink to="/#contacto">Contacto</HashLink>
Este enlace indica dos cosas:
- Que debe navegar a la ruta
/. - Que debe desplazarse hasta el elemento con
id="contacto".
Esta combinación es lo que hace tan útil a React Router Hash Link en aplicaciones con rutas internas.
Cómo añadir smooth scroll
Una de las ventajas más interesantes de React Router Hash Link es que permite añadir desplazamiento suave o smooth scroll de forma muy sencilla.
Solo tenemos que añadir la propiedad smooth:
<HashLink smooth to="/#servicios">
Servicios
</HashLink>
Con esto, el desplazamiento no se produce de forma brusca, sino con una transición más fluida.
Este detalle mejora mucho la experiencia del usuario, porque le ayuda a entender que se está desplazando a otra parte de la misma página. No hay un salto repentino ni una sensación extraña de cambio de contenido.
El smooth scroll funciona especialmente bien en:
- Menús de navegación de una landing.
- Botones de llamada a la acción.
- Índices de contenido.
- Páginas de servicios.
- Portfolios.
- Secciones de preguntas frecuentes.
- Formularios de contacto al final de la página.
Aun así, conviene usarlo con criterio. Una animación demasiado lenta o innecesaria puede resultar molesta. El objetivo no es decorar la interfaz, sino ayudar a que la navegación sea más comprensible.
Ejemplo completo de menú con React Router Hash Link
Veamos un ejemplo más completo de un menú de navegación con HashLink y smooth scroll.
import { HashLink } from "react-router-hash-link";
function Navbar() {
return (
<header className="site-header">
<nav className="site-nav">
<HashLink smooth to="/#inicio">
Inicio
</HashLink>
<HashLink smooth to="/#servicios">
Servicios
</HashLink>
<HashLink smooth to="/#proyectos">
Proyectos
</HashLink>
<HashLink smooth to="/#contacto">
Contacto
</HashLink>
</nav>
</header>
);
}
export default Navbar;
Y la página principal podría tener esta estructura:
function Home() {
return (
<main>
<section id="inicio" className="section">
<h1>Desarrollo frontend y diseño web</h1>
<p>
Creo interfaces claras, accesibles y orientadas a la experiencia de usuario.
</p>
</section>
<section id="servicios" className="section">
<h2>Servicios</h2>
<p>
Desarrollo web, optimización frontend y diseño de interfaces.
</p>
</section>
<section id="proyectos" className="section">
<h2>Proyectos</h2>
<p>
Una selección de trabajos realizados con React, WordPress y Astro.
</p>
</section>
<section id="contacto" className="section">
<h2>Contacto</h2>
<p>
¿Tienes un proyecto en mente? Escríbeme y lo hablamos.
</p>
</section>
</main>
);
}
export default Home;
Con este patrón ya tenemos una navegación interna funcional, clara y fácil de mantener.
Cómo evitar que el header tape la sección
Un problema muy común al usar enlaces ancla aparece cuando tenemos una cabecera fija o sticky. El enlace funciona, la página se desplaza, pero el título de la sección queda oculto detrás del menú superior.
Para evitarlo, podemos usar la propiedad CSS scroll-margin-top:
.section {
scroll-margin-top: 90px;
}
También podemos aplicarla a cualquier elemento que tenga un id:
[id] {
scroll-margin-top: 90px;
}
De esta forma, cuando el navegador haga scroll hasta una sección, dejará un margen superior y el contenido no quedará tapado por la cabecera.
Este tipo de detalle es pequeño, pero marca una gran diferencia en la experiencia de usuario. La navegación no solo debe funcionar: también debe sentirse cómoda y predecible.
Enlaces ancla entre diferentes rutas
React Router Hash Link no solo sirve para moverse dentro de una misma página. También permite enlazar desde una ruta hacia una sección concreta de otra ruta.
Por ejemplo, desde una página /sobre-mi podríamos enviar al usuario directamente al bloque de contacto de la home:
<HashLink smooth to="/#contacto">
Ir a contacto
</HashLink>
También podríamos apuntar a una sección concreta dentro de otra página:
<HashLink smooth to="/servicios#consultoria">
Ver consultoría frontend
</HashLink>
Y en la página de servicios tendríamos:
<section id="consultoria">
<h2>Consultoría frontend</h2>
</section>
Este patrón es muy útil cuando queremos conectar distintas partes de la aplicación sin obligar al usuario a buscar manualmente la sección que le interesa.
Por ejemplo, en una landing podríamos tener un botón como este:
<HashLink smooth className="button" to="/#contacto">
Solicitar presupuesto
</HashLink>
Este botón funcionaría como una llamada a la acción directa hacia el formulario de contacto.
Diferencia entre Link, NavLink y HashLink
Es importante no usar HashLink para todo. Cada componente tiene su función.
Link se utiliza para navegar entre rutas:
<Link to="/blog">Blog</Link>
NavLink también navega entre rutas, pero permite aplicar estilos cuando el enlace está activo:
<NavLink to="/blog">Blog</NavLink>
HashLink, en cambio, se utiliza cuando queremos navegar hacia una sección concreta de una página:
<HashLink smooth to="/#proyectos">
Proyectos
</HashLink>
La clave está en elegir el componente adecuado según la intención del enlace.
Si solo quieres cambiar de página, usa Link o NavLink. Si quieres ir a una sección concreta marcada con un id, usa HashLink.
Buenas prácticas al usar enlaces ancla en React
Para que la implementación sea sólida, conviene seguir algunas buenas prácticas.
Usa textos de enlace descriptivos
El texto del enlace debe explicar claramente hacia dónde lleva.
Mejor esto:
<HashLink smooth to="/#proyectos">
Ver proyectos destacados
</HashLink>
Que esto:
<HashLink smooth to="/#proyectos">
Haz clic aquí
</HashLink>
Un texto descriptivo mejora la accesibilidad, ayuda al usuario a entender la acción y hace que la navegación sea más clara.
Mantén una estructura semántica
Los enlaces ancla funcionan mejor cuando la página está bien organizada. Usa encabezados jerárquicos, secciones claras y contenido agrupado de forma lógica.
Por ejemplo:
<section id="servicios">
<h2>Servicios</h2>
<p>Texto introductorio de la sección.</p>
</section>
Esta estructura es más clara que una acumulación de div sin significado.
Si trabajas con datos que deben conservarse entre sesiones, puedes complementar esta parte con el artículo sobre cómo usar localStorage y sessionStorage en proyectos JavaScript, ya que también forma parte de la experiencia global de una aplicación frontend.
No abuses de las anclas
Los enlaces ancla son útiles, pero no deberían compensar una mala arquitectura de información.
Si una página necesita demasiados enlaces internos para entenderse, quizá conviene revisar la estructura general del contenido. En desarrollo frontend, la solución técnica debe acompañar siempre a una buena decisión de diseño.
Revisa el comportamiento en móvil
En móvil, los menús suelen ocupar más espacio y las secciones pueden quedar más juntas. Por eso es importante probar que el scroll funciona correctamente en distintos tamaños de pantalla.
También conviene comprobar que el menú no tapa la sección de destino y que los botones tienen un tamaño cómodo para pulsar.
Accesibilidad en enlaces ancla
Cuando trabajamos con navegación interna, no debemos pensar solo en el desplazamiento visual. También es importante tener en cuenta la accesibilidad.
Los enlaces deben ser comprensibles, navegables con teclado y coherentes con la estructura del documento. Además, las secciones de destino deberían tener encabezados claros para que la persona entienda dónde ha llegado.
En algunos proyectos, especialmente si la interfaz es compleja, puede ser necesario gestionar el foco manualmente después del desplazamiento. Esto puede ayudar a personas que navegan con teclado o lector de pantalla.
En proyectos sencillos, una estructura HTML semántica, encabezados claros y enlaces descriptivos ya aportan una base mucho más sólida.
Errores comunes al usar React Router Hash Link
Aunque React Router Hash Link es sencillo de usar, hay algunos errores frecuentes que pueden hacer que los enlaces no funcionen como esperamos.
El id no coincide con el hash
Este es el error más habitual.
Si el enlace apunta a:
<HashLink to="/#contacto">Contacto</HashLink>
Debe existir una sección como esta:
<section id="contacto">
<h2>Contacto</h2>
</section>
No funcionará si el id se llama de otra manera, por ejemplo:
<section id="contact">
<h2>Contacto</h2>
</section>
El valor después de # y el valor del id deben coincidir exactamente.
El contenido todavía no se ha renderizado
En React, puede ocurrir que el enlace intente hacer scroll antes de que la sección exista en el DOM. Esto puede pasar si el contenido depende de una petición a una API, una carga condicional o un estado que todavía no se ha actualizado.
En esos casos, conviene revisar cuándo se renderiza la sección y asegurarse de que el elemento de destino existe en el momento adecuado.
Usar HashLink cuando no hace falta
No todos los enlaces necesitan ser HashLink.
Si solo quieres navegar a otra ruta, un Link normal es suficiente:
<Link to="/blog">Blog</Link>
Reserva HashLink para los casos en los que quieras apuntar a una sección concreta.
Confundir HashRouter con HashLink
Aunque ambos conceptos utilizan el símbolo #, no son lo mismo.
HashRouter es una forma de gestionar rutas usando el hash de la URL:
/#/servicios
HashLink, en cambio, sirve para navegar hacia una sección concreta dentro de una página:
/#contacto
La diferencia puede parecer sutil, pero es importante. Uno gestiona rutas; el otro gestiona navegación hacia fragmentos internos.
React Router Hash Link y SEO
Desde el punto de vista SEO, los enlaces ancla pueden ayudar a organizar mejor el contenido, sobre todo en artículos largos, landings y páginas de documentación.
Un índice interno con enlaces hacia secciones concretas facilita la lectura y permite que el usuario encuentre antes lo que necesita. También permite compartir una URL directa hacia un bloque específico de la página.
Por ejemplo:
https://tusitio.com/blog/react-router-hash-link#smooth-scroll
Ahora bien, React Router Hash Link no es una solución SEO por sí sola. Es una herramienta de navegación. Para posicionar un artículo sobre React, React Router, HashLink, enlaces ancla, smooth scroll, JavaScript y desarrollo frontend, también necesitas:
- Un título claro y orientado a intención de búsqueda.
- Una estructura de encabezados bien organizada.
- Código práctico y explicado paso a paso.
- Contenido original.
- Buen rendimiento web.
- Enlaces internos relevantes.
- Una buena experiencia móvil.
- Respuestas claras a dudas frecuentes.
Google no posiciona una página solo porque tenga enlaces ancla. Lo importante es que el contenido resuelva bien la intención de búsqueda y que la experiencia de lectura sea cómoda.
Si te interesa seguir mejorando la parte técnica y de posicionamiento de tus proyectos, puedes ampliar con esta guía sobre SEO OnPage para posicionar tu web en Google.
Cuándo merece la pena usar React Router Hash Link
Merece la pena usar React Router Hash Link cuando tu aplicación React necesita combinar rutas con navegación hacia secciones internas.
Es especialmente útil en:
- Landings desarrolladas con React.
- Portfolios de desarrollo frontend.
- Menús superiores con navegación por secciones.
- Páginas de servicios.
- Artículos extensos con índice.
- Documentación técnica.
- Formularios de contacto al final de una página.
- Botones de llamada a la acción.
En cambio, si estás trabajando en una página muy sencilla sin React Router, quizá un enlace HTML tradicional sea suficiente.
La clave está en elegir la herramienta adecuada para el contexto. En desarrollo frontend no siempre gana la solución más compleja, sino la que resuelve mejor el problema con menos fricción.
Alternativas a React Router Hash Link
Aunque React Router Hash Link es una solución muy cómoda, no es la única opción.
Usar enlaces HTML tradicionales
Si todo ocurre dentro de la misma página y no necesitas integración con React Router, podrías usar un enlace normal:
<a href="#contacto">Contacto</a>
Esta opción puede funcionar bien en componentes muy sencillos.
Usar scrollIntoView
También puedes controlar el desplazamiento manualmente con JavaScript:
const scrollToContact = () => {
document.getElementById("contacto")?.scrollIntoView({
behavior: "smooth",
});
};
Y después usarlo en un botón:
<button onClick={scrollToContact}>
Ir a contacto
</button>
Esta alternativa da más control, pero también implica escribir más lógica manual.
Crear una solución personalizada
En proyectos grandes, puede tener sentido crear una solución propia para controlar el scroll, el foco, el estado activo del menú y otros detalles de accesibilidad.
Sin embargo, para muchos proyectos React, React Router Hash Link ofrece un equilibrio muy práctico entre simplicidad, claridad y funcionalidad.
Preguntas frecuentes sobre React Router Hash Link
¿React Router Hash Link sirve para hacer smooth scroll en React?
Sí. React Router Hash Link permite añadir desplazamiento suave usando la propiedad smooth en el componente HashLink.
<HashLink smooth to="/#contacto">
Contacto
</HashLink>
Con esta propiedad, el usuario no salta bruscamente a la sección, sino que la página se desplaza de forma más fluida.
¿Puedo usar HashLink para navegar a una sección de otra página?
Sí. Puedes usar HashLink para navegar desde una ruta hacia una sección concreta de otra página.
Por ejemplo:
<HashLink smooth to="/servicios#consultoria">
Ver consultoría
</HashLink>
Solo necesitas asegurarte de que en la página de destino exista un elemento con el id correspondiente:
<section id="consultoria">
<h2>Consultoría</h2>
</section>
¿Qué diferencia hay entre Link y HashLink?
Link se usa para navegar entre rutas dentro de una aplicación React con React Router. HashLink, en cambio, se usa cuando quieres navegar a una ruta y, además, desplazarte hasta una sección concreta marcada con un id.
Usa Link para rutas generales:
<Link to="/blog">Blog</Link>
Y usa HashLink para enlaces ancla:
<HashLink smooth to="/#proyectos">
Proyectos
</HashLink>
Navegar mejor también es diseñar mejor
React Router Hash Link es una herramienta sencilla, pero muy útil cuando necesitamos crear enlaces ancla en React dentro de una aplicación gestionada con React Router.
A lo largo del artículo hemos visto qué problema resuelve, cómo instalarla, cómo usar HashLink, cómo activar el smooth scroll, cómo evitar errores comunes y qué buenas prácticas conviene aplicar en proyectos reales de desarrollo frontend.
La idea más importante es que un enlace ancla no es solo un detalle técnico. También es una decisión de experiencia de usuario. Cuando llevamos a una persona directamente a la sección que necesita, reducimos fricción, mejoramos la navegación y hacemos que la interfaz resulte más clara.
En frontend, muchas veces la calidad está en estos pequeños gestos: un menú que no estorba, una sección que aparece justo donde debe, un desplazamiento que orienta en lugar de confundir y una navegación que acompaña al usuario sin exigirle esfuerzo extra.
Por eso, si estás creando una landing, un portfolio, una página de servicios o una documentación en React, React Router Hash Link puede ser una solución muy práctica para mejorar la navegación interna y ofrecer una experiencia más cuidada.