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 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 o button 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 del button en React, 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 o botón con enlace HTML, 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 o button en React. 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 (button link 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 del botón con enlace HTML, 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 o button link React. 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 para el botón con enlace HTML. 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 (button link React), 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!
