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

89

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?

reactjs react-router react-router-v4

— yam55
quelle

4

Ich kann TOUMI nicht direkt kommentieren (weil ich keine 50rep habe), also werde ich es hier hinzufügen. NavLinkbehält den richtigen Fokus auf der Seite für die Barrierefreiheit. Wenn Sie einen Link verwenden, geht der anfängliche Fokus beim Laden der Seite verloren, und Sie werden auch feststellen, dass das Durchblättern von Dropdowns bei der Verwendung ebenfalls unterbrochen wird Link. NavLink behebt dieses Problem.

— DJNorris

130

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.

— Abdennour TOUMI
quelle

40

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>

— Sultan Aslam
quelle

6

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

— Santosh Singh
quelle

5

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.

— Neo_
quelle

Einige Codebeispiele helfen den Benutzern. Aus der Bewertung

— Vaibhav Vishal