Crear botón con enlace en React

Autor: | Última modificación: 26 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

En el proceso de crear un proyecto de programación, hay muchos momentos en los que querremos combinar las propiedades de dos elementos para tener componentes más fuertes. Este es el caso de los botones con enlace, que combinan el elemento button con el link. En este post, te enseñaremos cómo usar la librería styled components para crear botón con enlace en React.

¿Qué es un botón con enlace?

Cuando hablamos de un botón con enlace nos referimos a un elemento HTML Button que, en vez de ejecutar cualquier acción, nos lleva a una nueva sección de nuestra aplicación. Es decir, funciona como un enlace, pues nos redirige a una URL diferente a la actual.

Un ejemplo de un botón con enlace muy común es un botón de login en el encabezado de una red social. Este botón debería llevar al usuario hacia la página de inicio de sesión. Para ello, deberá tener un enlace dentro o comportarse como un enlace. A continuación, te enseñamos cómo crear un botón con enlace en React.

¿Cómo crear botón con enlace en React?

Hay dos maneras de crear botón con enlace en React. Una de las opciones es crear una función navigate con el hook useNavigate de React, produciendo una navegación:

const navigate = useNavigate ( )

En este sentido, cuando ejecutemos la variable navigate estaríamos dirigiendo al usuario a la página que queramos. Para ello, tendríamos que pasar un evento onClick en el que la función navigate se ejecute. Sin embargo, te recomendamos utilizar esta opción solo en casos en los que no existe ninguna otra forma de crear navegación. Este no es el caso del elemento Button, en donde podemos crear un código más declarativo.

Crear botón con enlace en React significa añadir un enlace a un elemento Button. No basta con cambiar únicamente este elemento por uno Link, pues esto quitaría todos los estilos que le hayamos añadido al botón. Para conocer más sobre este proceso, te invitamos a leer nuestro post sobre estilizar botones con styled components en React.

Por tanto, para crear botón con enlace en React podemos mantener el elemento Button que hemos creado con la librería styled components para React. A este elemento, como a todos los que creemos con esta librería, podemos pasarle una propiedad as. En nuestro caso, a esta propiedad podemos pasarle el componente Link. Para ello, debemos abrir una ventana a JavaScript en React con el uso de las llaves { }.

<Button as={Link} to=»/login» variant=»primary» className={className}>

Login

</Button>

Al pasar la propiedad as en este elemento, mantenemos el look de un botón. Sin embargo, si nos vamos al inspector de nuestro navegador y revisamos los elementos, veremos que este elemento realmente es un a. Es decir, cuando insertamos la propiedad as={Link}, le estamos diciendo al elemento Button que se convierta en un elemento de enlace.

De este modo, este componente aceptará todas las propiedades que acepta un link, como puede ser la propiedad to=»/login». Sin embargo, lo hará con el estilo del Button. En este sentido, estamos mezclando el elemento Button y sus propiedades (variant) con las del elemento Link (to). En definitiva, React renderiza un elemento Button con sus estilos, pero con el funcionamiento de un link.

¿Qué sigue?

Ahora que sabes cómo crear botón con enlace en React, entiendes la importancia de esta librería para unir JavaScript con HTML. Sin embargo, todavía queda mucho por aprender acerca del mundo del desarrollo web. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar una gran variedad de lenguajes y herramientas, entre los que se incluyen JavaScript, HTML, CSS Y JSX. ¿A qué esperas para convertirte en un experto de este mundo? ¡No lo dudes y matricúlate para darle un giro a tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!