Outre la possibilité de définir un "activeClassName" et un "activeStyle" sur le NavLink, y a-t-il une raison d'utiliser l'option NavLink sur Lien lors de la création de liens vers d'autres itinéraires sur des éléments ne faisant pas partie de la navigation (c'est-à-dire qui ne font pas partie de la navigation principale dans l'en-tête ou le pied de page) sur votre site et qui n'ont pas besoin d'un état/classe actif(e) ?
Le site documentation officielle est clair :
<NavLink>Une version spéciale de la
<Link>qui ajoutera des attributs de style à l'élément rendu lorsqu'il correspond à l'URL actuelle.
Ainsi, la réponse est NON . Il n'y a pas d'autres raisons que celle mentionnée.
Lorsque vous avez besoin d'utiliser des attributs de style ou de classe sur des éléments actifs, vous pouvez utiliser les attributs de classe. <Link> alors vous pouvez utiliser <NavLink>
Prenons un exemple :
Lien
<Link to="/">Home</Link>NavLink
<NavLink to="/" activeClassName="active">Home</NavLink>
Composant du lien
Il est utilisé pour créer des liens qui permettent de naviguer sur différentes URLs et lorsque l'on clique sur une de ces Lien il devrait charger la page qui est associée à ce chemin sans recharger la page. Exemple :
Composant NavLink :
Si, nous voulons ajouter des styles au Lien. Ainsi, lorsque l'on clique sur un lien particulier, on peut facilement identifier le lien qui est actif. Pour cela, le routeur react fournit NavLink au lieu de Lien . Maintenant, remplacez Link de Navlink et ajouter des propriétés activeStyle . Le site activeStyle Lorsque l'on clique sur le lien, il doit être mis en évidence avec un style différent afin que l'on puisse différencier le lien actif. différencier quel lien est actuellement actif. Exemple :
Juste pour ajouter dans la v6, NavLink ajoute .active à la classe a sans aucun code supplémentaire, par exemple.
<NavLink to="/">Link 1</Link>
<NavLink to="/link2">Link 2</Link>sera rendu comme :
<a href="http://stackoverflow.com/" className='active'>Link 1</Link>
<a href="http://stackoverflow.com/link2">Link 2</Link>si l'utilisateur est sur l'URL d'accueil (https://localhost:3000)
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
5 votes
Je ne peux pas commenter directement sur TOUMI (parce que je n'ai pas 50rep), alors je vais l'ajouter ici.
NavLinkpermet de garder le focus sur la page pour l'accessibilité. Lorsque vous utilisez un lien, la mise au point initiale est perdue au chargement de la page et vous remarquerez également que la navigation dans les listes déroulantes est également interrompue lorsque vous utilisez la fonctionLink. NavLink corrige cela.