Ventajas de React Router v4 <NavLink> vs <Link>

94

Además de la capacidad de establecer un "activeClassName" y "activeStyle" en NavLink, ¿hay alguna razón para usar NavLink sobre Link al crear enlaces a otras rutas en elementos que no son de navegación (es decir, no navegación principal en el encabezado o pie de página) en su sitio? que no necesita un estado / clase activa?

ñame55
fuente
4
No puedo comentar directamente a TOUMI (porque no tengo 50 repeticiones), así que lo agregaré aquí. NavLinkmantiene el enfoque adecuado en la página para la accesibilidad. Al usar el enlace, el enfoque inicial se pierde en la carga de la página y también notará que la tabulación a través de los menús desplegables también se rompe cuando se usa Link. NavLink corrige esto.
DJNorris

Respuestas:

137

La documentación oficial es clara:

<NavLink>

Una versión especial del <Link>que agregará atributos de estilo al elemento renderizado cuando coincida con la URL actual.

Por tanto, la respuesta es NO . No hay otras razones excepto la mencionada.

Abdennour TOUMI
fuente
42

Cuando necesite usar atributos de estilo o clase en activo <Link>, puede usar<NavLink>

Veamos el ejemplo:

Enlace

<Link to="/">Home</Link>

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>
sultán aslam
fuente
7

Componente de enlace

Se utiliza para crear enlaces que permiten navegar en diferentes URL y cuando hacemos clic en cualquiera de ese enlace en particular , debe cargar esa página que está asociada con esa ruta sin recargar la página. Ejemplo:

ingrese la descripción de la imagen aquí

Componente NavLink:

Si, queremos agregar algunos estilos al enlace. De modo que cuando hacemos clic en cualquier enlace en particular, se puede identificar fácilmente qué enlace está activo. Para esta reacción, el enrutador proporciona NavLink en lugar de Link . Ahora reemplace Link de Navlink y agregue propiedades activeStyle . Las propiedades activeStyle significan que cuando hacemos clic en el enlace, debe resaltarse con un estilo diferente para que podamos diferenciar qué enlace está actualmente activo. Ejemplo:

ingrese la descripción de la imagen aquí

Ref: https://www.javatpoint.com/react-router

Santosh Singh
fuente
5

Simplemente, cuando lo usa, <Link>no hay ninguna clase activa en el elemento seleccionado.
En contraste, con <NavLink>el elemento seleccionado se resalta porque a este elemento se le agrega una clase activa.
Espero útil para ti.

Neo_
fuente
Algunos ejemplos de código ayudarán a los usuarios. De la revisión
Vaibhav Vishal