React Router es una librería que acompaña y facilita el desarrollo de la navegación en nuestros proyectos React. Para ello, pone a nuestra disposición una serie de componentes que nos permiten crear una navegación dinámica. En este post, te enseñaremos qué son y cómo funcionan los componentes link y navlink en React Router, fundamentales para crear enlaces dentro de tu proyecto React. También aprenderás cuál es mejor entre navlink vs link react router.
Como puedes leer en nuestro post sobre componentes principales de React Router, los componentes link y navlink en React browser Router son dos componentes que nos permiten crear enlaces en distintos componentes de nuestra aplicación. En teoría, esto también se podría lograr con el elemento a junto a su href en HTML. Sin embargo, los componentes link y navlink en React nos permiten mantener la navegación de enlaces a nivel de cliente. Es decir que hacen la navegación en el navegador en vez de ejecutar una nueva petición a nuestro servidor.
Un ejemplo clásico de un enlace en cualquier aplicación de redes sociales es cuando el usuario hace clic en el icono de la aplicación. Allí, normalmente, ponemos un enlace que lleve a la página de inicio de nuestra aplicación. Esto se hace con los componentes link y navlink en React Router. A continuación, te explicamos exactamente cómo funcionan.
Los componentes link y navlink en React Router funcionan prácticamente de la misma manera. El componente base para crear enlaces es el link, que es prácticamente lo mismo. A continuación, te explicamos exactamente cómo funciona cada uno de estos componentes.
Link
El componente link en React Router funciona a partir de su propiedad to. En esta propiedad, asignamos como valor el enlace a la página que queremos llevar. Por debajo de link hay un elemento a. Sin embargo, React browser Router lo envuelve de una manera en la que no se fuerce la petición al servidor. Por ello, el componente link nos permite mantener la navegación a nivel del browser o navegador.
A continuación, te mostramos un ejemplo de cómo se escribe este componente:
<Link to=«about»>About</Link>
Si quisieras utilizar el componente link para hacer que el icono de tu aplicación lleve al usuario a tu página principal, deberás envolver la línea de código de tu icono en este componente. Entonces, supongamos que nuestro icono está en las siguientes líneas de código:
//link vs navlink react router
<div className=»header-logo»>
<Icon width=»32″ height=»32″ />
</div>
Ahora, deberemos envolver este icono con el componente link y darle la propiedad to con el enlace a nuestra página de inicio.
<Link to=»/»>
<div className=»header-logo»>
<Icon width=»32″ height=»32″ />
</div>
</Link>
Con estas líneas de código, presionar el icono nos llevara a la URL «/». Si estás revisando este proceso con el inspector de tu navegador, notarás que crear este enlace no está forzando la descarga de nuestro HTML ni del bundle.js que lo acompaña. Por ello, no se está generando una nueva petición al servidor ni un reinicio de nuestra aplicación. En realidad, lo único que hace este enlace es pedir ciertos componentes para renderizar y mostrar en pantalla.
Como mencionamos antes, los componentes link y navLink en React Router funcionan prácticamente igual. Entonces, podemos crear un enlace en la cabecera de nuestra aplicación para crear un nuevo contenido. Este NavLink lo crearemos dentro de un elemento nav con el que hemos hecho una barra de navegación.
//nav-link
<nav className=»header-nav»
<NavLink to=«/tweets/new»>New Tweet</NavLink>
</nav>
Hasta este momento, los componentes link y navLink en React Router funcionan igual. La diferencia principal es que el navLink, como su nombre indica, se usa principalmente para barras de navegación. Esto se debe a que nos va a dar una clase llamada «active» cuando el elemento haga match con el link en React. Es decir, podemos estilizar cómo se ve el elemento cuando esté seleccionado. Imagínate una barra de navegación con cuatro enlaces; el navlink React que haga match con la URL tendrá una propiedad className=active con la que podemos estilizarlo.
Para conocer más sobre este componente, te invitamos a leer nuestro post sobre cómo usar navlink en React Router.
¿Quieres seguir aprendiendo?
Después de leer este post, sabes exactamente qué son y cómo funcionan los componentes link y navlink en React Router. Sin embargo, todavía queda mucho por aprender para dominar el 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 desarrollar con lenguajes como JavaScript, HTML, CSS y JSX. ¿Quieres seguir aprendiendo con nosotros? ¡Matricúlate ahora y dale un gran giro a tu vida!
