Muchos proyectos web requieren rutas dinámicas que cambian y se crean según la interacción del usuario con la página, ya sea porque este creó un nuevo contenido que ahora debe tener su propia URL o porque quiere consultar otro contenido con una URL única. En este post, te enseñaremos qué es y cómo funciona un enlace con ID en JavaScript para que puedas hacer que tus URL sean más específicas.
¿Qué es un enlace con ID en JavaScript?
Un enlace con ID en JavaScript es una URL dinámica que, en vez de tener definido todo el contenido de su enlace, tiene un segmento de tipo query string que cambia dependiendo del contenido seleccionado. Este segmento luego lo usará y consultará la interfaz URLSearchParams para hacer una petición a la API con este valor y obtener el contenido a mostrar.
Este tipo de enlaces suelen usarse en redes sociales con muchos contenidos que deben ser identificados para ser mostrados. Por este gran uso, a continuación te mostraremos cómo hacer un enlace con ID en JavaScript.
¿Cómo hacer un enlace con ID en JavaScript?
Para hacer un enlace con ID en JavaScript, debemos ejecutar un proceso un poco distinto a lo que haríamos con un router dinámico que nos permite interpolar rutas. Es decir, no podemos apuntar a un enlace en el que llevemos a un HTML y luego al ID de nuestro contenido con barras, algo como lo siguiente:
localhost:8000/contentDetail.html/1
Entonces, ¿cómo podemos determinar un enlace con ID en JavaScript? Pues usando el concepto de query string de las URL, segmentos que siguen al símbolo de interrogación (algo que te explicamos más detenidamente en nuestro post sobre la interfaz URLSearchParams). A continuación, te mostramos un ejemplo inventado de un enlace con query string:
localhost:8000/contentDetail.html?nombre=valor&nombre2=valor2
A partir de este concepto de query string, un enlace con ID en JavaScript se refiere a insertar el id del contenido en este segmento. Para ello, basta con crear un nuevo elemento HTML de tipo a que contenga un enlace a la página HTML a la que queremos acceder.
<a href=”/contentDetail.html> </a>
Después de este enlace básico, deberemos empezar nuestra sección query string. Para ello, debemos insertar un simple símbolo de interrogación, com puedes observar en la siguiente línea:
<a href=”/contentDetail.html?> </a>
Ahora, para crear un enlace con ID en JavaScript deberemos insertar el nombre de la clave que queremos que tengan todos nuestros enlaces y un símbolo de igual a. En nuestro caso, llamaremos a este nombre igual que a la propiedad a la que estamos accediendo: id.
<a href=”/contentDetail.html?id=> </a>
El último paso para crear un enlace con ID en JavaScript es hacer que este link sea dinámico. Es decir, llamar a una propiedad que contenga un valor que puede cambiar según el contenido insertado. En nuestro caso, llamaremos a la propiedad id del contenido. Para ello, usamos los símbolos ${ }, fundamentales para llamar a una variable dentro de un string en JavaScript.
A continuación, te mostramos el resultado final de nuestro enlace con ID en JavaScript:
<a href=”/contentDetail.html?id=${tweet.id}”> </a>
Para comprobar el funcionamiento de la lógica anterior, puedes dirigirte a una página en donde se encuentren los distintos contenidos y sus enlaces. Una vez allí, podrás abrir el inspector de tu navegador para revisar el enlace de cada uno de los contenidos. Si has aplicado la anterior lógica de forma correcta, cada contenido debería tener un enlace con un query string distinto, pues sigue el id del contenido en el que se encuentra.
¿Quieres seguir aprendiendo?
Tras leer este post, sabes exactamente qué es y cómo se hace un enlace con ID en JavaScript. Sin embargo, ¡todavía queda mucho por aprender sobre este lenguaje de programación! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con lenguajes de programación fundamentales para la web como JavaScript, HTML, CSS y JSX. ¡No dudes en solicitar ahora más información para descubrir cómo impulsar tu carrera!
