Reagieren Sie auf die Vorteile von Router <4 <NavLink> und <Link>

Neben der Möglichkeit, einen "activeClassName" und einen "activeStyle" in NavLink festzulegen, gibt es einen Grund, NavLink over Link zu verwenden, wenn Sie Links zu anderen Routen auf nicht navigierenden Elementen (dh nicht Hauptnavigation in Kopf- oder Fußzeile) auf Ihrer Site erstellen das braucht keinen aktiven Zustand / Klasse?

Die offizielle Dokumentation ist klar:

<NavLink>

Eine spezielle Version von, die <Link>dem gerenderten Element Stilattribute hinzufügt, wenn es mit der aktuellen URL übereinstimmt.

Die Antwort lautet also NEIN . Es gibt keine anderen Gründe als den genannten.

Wenn Sie Stil- oder Klassenattribute für Aktiv verwenden müssen <Link>, können Sie verwenden<NavLink>

Sehen wir uns das Beispiel an:

Verknüpfung

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

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>

Link-Komponente

Es wird verwendet, um Links zu erstellen, mit denen Sie auf verschiedenen URLs navigieren können. Wenn Sie auf einen bestimmten Link klicken , sollte die diesem Pfad zugeordnete Seite geladen werden, ohne die Seite neu zu laden. Beispiel:

NavLink-Komponente:

Wenn ja, möchten wir dem Link einige Stile hinzufügen . Wenn wir also auf einen bestimmten Link klicken, kann leicht festgestellt werden, welcher Link aktiv ist. Für diese Reaktion bietet der Router NavLink anstelle von Link . Ersetzen Sie nun Link von Navlink und fügen Sie die Eigenschaften activeStyle hinzu . Die activeStyle- Eigenschaften bedeuten, dass beim Klicken auf den Link dieser mit einem anderen Stil hervorgehoben werden sollte, damit wir unterscheiden können, welcher Link derzeit aktiv ist. Beispiel:

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

Einfach, wenn Sie verwenden, <Link>gibt es keine aktive Klasse für das ausgewählte Element.
Im Gegensatz dazu wird mit <NavLink>dem ausgewählten Element hervorgehoben, da diesem Element eine aktive Klasse hinzugefügt wird.
Hoffe nützlich für dich.