Link y NavLink para navegación en React

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:18

Link y NavLink para navegación en React

Curso de React.js: Navegación con React Router

Clase 7 de 30

Clase 7 / 30

Recursos

La navegación en una aplicación React no debería forzar al navegador a pedir un HTML nuevo cada vez que el usuario hace clic. Con los componentes Link y NavLink de react-router-dom puedes cambiar de ruta desde JavaScript, conservar el estado de la app y, además, resaltar la ruta activa con estilos dinámicos.

Por qué reemplazar la etiqueta a por Link en React Router

Usar etiquetas <a> para mover al usuario entre rutas tiene dos problemas concretos. Si trabajas con un hash router, te toca escribir manualmente el # en cada href, por ejemplo /#/blog en lugar de /blog. Y si usas un browser router, el clic dispara una nueva petición al servidor que vuelve a descargar todo el HTML, perdiendo la principal ventaja de una SPA.

La solución es delegar la navegación a JavaScript. React Router ya sabe qué tipo de router configuraste y se encarga de añadir el hash cuando hace falta o de actualizar la URL sin recargar la página [02:30].

¿Qué hace el componente Link de React Router? Cambia la URL desde JavaScript sin recargar el HTML y, según el router que tengas configurado, agrega el hash automáticamente. Se usa con la prop to en lugar de href.

Cómo se importa y se usa Link

El componente Link se importa desde react-router-dom y reemplaza directamente a <a> dentro del menú. La diferencia clave en sintaxis está en la prop: ya no es href, ahora es to [04:10].

jsx import { Link } from 'react-router-dom';

<li><Link to="/">Home</Link></li> <li><Link to="/blog">Blog</Link></li> <li><Link to="/profile">Profile</Link></li>

Con esto, la navegación entre Home, Blog y Profile ocurre sin recargar la página y sin que tengas que preocuparte por el #.

Qué diferencia a NavLink de Link en React Router v6

NavLink funciona igual que Link: también recibe la prop to y renderiza un enlace. La ventaja es que te entrega información sobre si la ruta a la que apunta coincide con la ruta actual, lo cual sirve para resaltar el ítem del menú activo [06:20].

En la versión 6 de react-router-dom, las props className y style de NavLink aceptan una función en lugar de un string o un objeto. Esa función recibe un argumento llamado isActive, un booleano que te dice si el enlace corresponde a la URL actual.

jsx <NavLink to="/" style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}

Home </NavLink>

Cuando estás en /, el enlace de Home se pinta rojo; al pasar a /blog, Home vuelve a azul y Blog se vuelve rojo. Así el usuario sabe en qué sección está, no solo por la URL.

¿Qué es isActive en NavLink? Es un parámetro booleano que React Router pasa a las funciones de className o style dentro de un NavLink. Vale true cuando la ruta del enlace coincide con la ruta activa.

Cómo aplicar estilos dinámicos sin repetir código

Si copias la misma función de style en cada NavLink, el menú crece y el código se vuelve tedioso. La práctica recomendada es declarar un arreglo con la información de cada ruta y recorrerlo con .map para generar los enlaces [10:45].

Cómo renderizar un menú dinámico con un array de rutas

Define un arreglo de objetos donde cada objeto tenga las propiedades que cambian entre un enlace y otro: la ruta destino y el texto visible. Después usa .map para devolver un NavLink por cada elemento.

jsx const routes = [ { to: '/', text: 'Home' }, { to: '/blog', text: 'Blog' }, { to: '/profile', text: 'Profile' } ];

<ul> {routes.map((route) => ( <li key={route.to}> <NavLink to={route.to} style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })} > {route.text} </NavLink> </li> ))} </ul>

Con este patrón, agregar una nueva sección al menú es solo añadir un objeto al arreglo. La función de estilos vive una sola vez y todos los enlaces heredan el comportamiento activo/inactivo.

Habilidades y conceptos que estás practicando

Single Page Application (SPA): navegar sin recargar el HTML, manipulando la URL desde JavaScript.
Prop to vs href: en React Router se usa to para indicar la ruta destino [04:10].
Render condicional de estilos: aprovechas isActive para devolver diferentes valores en style o className [07:30].
Renderizado de listas con .map: transformas un array de datos en un array de componentes JSX [11:20].
Hash Router vs Browser Router: el comportamiento del enlace cambia según el tipo de router configurado.

En la próxima clase vas a ver cómo crear rutas dinámicas, esas en las que una parte de la URL cambia y te permite renderizar componentes con la misma estructura pero contenido distinto. ¿Cómo estás organizando los menús de tus apps en React? Cuéntalo en los comentarios.

Harold Zurita Simon

Hace 3 años

Link vs. NavLink

. Los componentes Link y NavLink nos ayudarán para que nuestra navegación no se transforme en nuevas peticiones al servidor para que descargue un nuevo HTML, sino que solo haga la navegación desde Javascript. Vamos a cambiar la etiqueta <a></a> con alguna de estas 2 opciones, y esto nos permite cambiar de url sin recargar la página y podamos mostrar la información correspondiente. . Eventualmente, si utilizamos la forma normal de crear enlaces no va a funcionar, puesto que estamos utilizando un HashRouter. .

<nav>
	<ul>
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/blog">Blog</a>
		</li>
		<li>
			<a href="/profile">Profile</a>
		</li>
	</ul>
</nav>

. Si quisiéramos forzar su funcionamiento tendríamos que agregar manualmente los hashes a las rutas en la propiedad href. Sin embargo, esta etiqueta lo que hace es hacer una nueva petición al servidor para que se descargue otra vez el HTML y no queremos eso. .

<nav>
	<ul>
		<li>
			<a href="/">Home</a>
		</li>
		<li>
			<a href="/#/blog">Blog</a>
		</li>
		<li>
			<a href="/#/profile">Profile</a>
		</li>
	</ul>
</nav>

. Vamos a utilizar la etiqueta <Link></Link> el cual funciona parecido a la etiqueta <a></a>, solo que en lugar de utilizar href utilizaremos la propiedad to. .

function Menu() {
	return (
		<nav>
			<ul>
				<li>
					<Link to="/">Home</Link>
				</li>
				<li>
					<Link to="/blog">Blog</Link>
				</li>
				<li>
					<Link to="/profile">Profile</Link>
				</li>
			</ul>
		</nav>
	)
}

export { Menu };

. Si navegamos esta vez no volverá a cargar la página, porque Link es un componente oficial de react-router-dom y sabe que tipo de router estamos utilizando. Esto significa que agrega o no el hash, dependiendo de lo que necesitemos. Incluso si estuviéramos trabajando con un BrowserRouter la navegación se realiza sin recargar la página, sino que va a ser el mismo HTML y con Javascript estamos cambiando los componentes que renderizamos en una ruta u otra. .

function Menu() {
	return (
		<nav>
			<ul>
				<li>
					<NavLink 
						style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
	          to="/">Home</NavLink>
				</li>
				<li>
					<NavLink 
						style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
						to="/blog">Blog</NavLink>
				</li>
				<li>
					<NavLink 
						style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
						to="/profile">Profile</NavLink>
				</li>
			</ul>
		</nav>
	)
}

export { Menu };

. Al utilizar NavLink se sigue utilizando to para la ruta, sin embargo este componente nos permite utilizar los componentes className y style. A travéz de estas propiedades, por ejemplo podemos utilizar funciones y recibir por destructuración al parámetro isActive que nos indica si nos encontramos en esa ruta en particular o si está activa, luego podemos realizar condicionales y devolver un estilo u otro dependiendo de ello. .

function Menu() {
  return (
    <nav>
      <ul>
        {routes.map(route => (
          <li>
            <NavLink
              style={({ isActive }) => ({
                color: isActive ? 'red' : 'blue',
              })}
              to={route.to}
            >
              {route.text}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
}

const routes = [];
routes.push({
  to: '/',
  text: 'Home',
});
routes.push({
  to: '/blog',
  text: 'Blog',
});
routes.push({
  to: '/profile',
  text: 'Profile',
});

export { Menu };

. Como pudimos observar habían partes de código repetido, por lo cual es conveniente crear un arreglo de rutas donde iremos insertando unos objetos con las propiedades to y text, que nos servirán para renderizar los items de nuestra lista de manera dinámica mediante un map y utilizando el style una sola vez.

Comentarios (34)34 comentarios

Ivan González

Hace 4 años

Felipe Taborda Villegas

Héctor Haro Hermosillo

Juan David Reyes

Andrés Esteban Rodríguez Jiménez

Fabio Erik Sosa Morinigo

Johangly Sucre

Ignacio Basilio

JOSE RANGEL

Seba Cardoso

Juan Pablo Cortés

Diego Reyes Cabrera

Oscar Adrián Martínez Cavazos

Max Andy Diaz Neyra

Felipe de Jesús Isidro

Juan Castro

Profesor

Geovanni Labastida Vázquez

Jose Luis Bedoya

Donovan RM

Rubén Ernesto Aragón Gil

Rodrigo Andrés Moreno Pertúz

Julian Franco

Sergio Olivo Orellana

Charles Castillo Rosas

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Link y NavLink para navegación en React