React Router es una librería que nos facilita el proceso de diseñar la navegación de nuestras aplicaciones React. Para ello, utiliza una serie de componentes con los que nos permite establecer una navegación dinámica. En este post, te enseñaremos cómo usar navlink en React Router, uno de los componentes principales para crear enlaces en esta librería.
¿Qué es navlink en React Router?
Antes de entrar en cómo usar navlink en React Router, es importante conocer qué es. Como puedes leer en nuestro post sobre los componentes principales de React Router, NavLink es uno de los componentes principales de esta librería. Al igual que el componente link, el componente NavLink nos permite crear enlaces de navegación dentro de nuestra aplicación.
Si quieres aprender a utilizar el componente base para enlaces, Link, te invitamos a leer nuestro post sobre componentes link y navLink en React Router.
Como puedes leer en ese post sobre navlink react, la diferencia principal entre estos dos componentes es que, como su nombre indica, NavLink es especial para las barras de navegación. Esto se debe a que nos permite asignarle una propiedad className=active al enlace que haga match con la URL del momento. Dicha clase nos permite llamar al componente “activo” y darle determinados estilos para diferenciar el enlace en el que se encuentra actualmente el usuario. A continuación, te enseñaremos cómo funciona este proceso.
¿Cómo usar navlink en React Router?
Para enseñarte cómo usar navlink en React Router usaremos como ejemplo una barra de navegación de una aplicación con dos enlaces: uno about que lleva al usuario a conocer más de la aplicación y otro new que lo lleva a la página para crear nuevo contenido. Para crear la barra de navegación con navlink react, envolvemos estos dos enlaces en el elemento nav de HTML.
<nav className= “header-nav”>
<NavLink to= “/content/new” > New content </NavLink>
<NavLink to= “/about” > About </NavLink>
</nav>
Ahora, como mencionamos anteriormente, a estos navlink podemos añadirle la propiedad className=active.
<nav className= “header-nav”>
<NavLink to= “/content/new” className= “active”> New content </NavLink>
<NavLink to= “/about” > About </NavLink>
</nav>
El problema de definir la clase de este modo en navlink react es que, cuando tenemos más de un enlace, tendremos problemas para estilizar un solo enlace, pues tendríamos que pasarle la clase “active” a todos.
La ventaja del componente navlink react router es que, además de poder pasarle un string como en cualquier otra clase, podemos pasarle una función. Esta función acepta como parámetro un isActive. Este isActive será igual a true solamente cuando el link que le hemos dado a nuestro enlace coincida con el que está actualmente en el navegador. Entonces, podemos decirle a esta función que, cuando isActive sea verdadero, le inserte la clase ‘active’ al enlace.
<NavLink to= “/content/new” className={({isActive})=> isActive ? ‘active’ : ‘ ‘}
>
New content
</NavLink>
<NavLink to= “/about” className={({isActive})=> isActive ? ‘active’ : ‘ ‘}
>
About
</NavLink>
Ahora que hemos definido que la clase ‘active’ solo estará presente cuando isActive sea true, es decir, cuando la URL actual sea igual al link definido en el enlace, podemos estilizar la clase de navlink react router. Para ello, podemos llamar a la clase active y decirle, por ejemplo, que cuando el enlace esté activo el color sea verde:
.header-nav .active {
color: green;
}
Para conocer más sobre React Router, como navlink react router, te invitamos a leer la documentación oficial en reactrouter.com. También puedes leer los distintos posts que tenemos sobre esta librería en nuestro blog de desarrollo web.
¿Qué sigue?
Ahora que sabes cómo usar navlink en React Router, ¡es momento de empezar a diseñar la navegación de tus propios proyectos con React! Para aprender a desarrollar todo tipo de proyectos de programación para la web, no solo con React sino también con otras herramientas y lenguajes, como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Se trata de un programa de formación intensiva donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¡No esperes más para empezar esta aventura y matricúlate ya!
