React Router v4 <NavLink>と<Link>のメリット


94

NavLinkの「activeClassName」と「activeStyle」を設定する機能のほかに、使用するために何らかの理由があるNavLinkを介してリンクあなたのサイト上で(ヘッダーやフッターにすなわちないメインNAV)非ナビゲーション要素上の他のルートへのリンクを作成する場合は、アクティブな状態/クラスを必要としませんか?


4
TOUMIに直接コメントすることはできません(50repがないため)ので、ここに追加します。NavLinkアクセシビリティのためにページに適切な焦点を合わせ続けます。リンクを使用すると、ページの読み込み時に最初のフォーカスが失われますLink。また、を使用すると、ドロップダウンのタブ移動も中断することに気付くでしょう。NavLinkはこれを修正します。
DJNorris

回答:


137

公式ドキュメントは明確です:

<NavLink>

の特別なバージョンは<Link>、現在のURLと一致したときに、レンダリングされた要素にスタイリング属性を追加します。

したがって、答えはNOです。上記以外の理由はありません。


42

アクティブ<Link>でスタイルまたはクラス属性を使用する必要がある場合は、次を使用できます。<NavLink>

例を見てみましょう:

リンク

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

NavLink

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

7

リンクコンポーネント

これは、さまざまなURLをナビゲートできるリンクを作成するために使用され、その特定のリンクのいずれかをクリックすると、ページを再ロードせずに、そのパスに関連付けられているページをロードする必要があります。 例:

ここに画像の説明を入力してください

NavLinkコンポーネント:

の場合、リンクにいくつかのスタイルを追加します。そのため、特定のリンクをクリックすると、どのリンクがアクティブであるかを簡単に識別できます。このためにルータが提供して反応するNavLink代わりの リンクを。次に、NavlinkからLinkを置き換え、プロパティactiveStyleを追加します。activeStyleのプロパティは、当社がリンクをクリックしたときに我々は現在アクティブなリンクを区別できるように、それは異なるスタイルで強調表示されますを意味します。 例:

ここに画像の説明を入力してください

参照:https//www.javatpoint.com/react-router


5

簡単に言うと、使用する場合、選択した要素にアクティブなクラス<Link>はありません。 対照的に、この要素にはアクティブクラスが追加されているため、選択した要素が強調表示されます。 お役に立てば幸いです。
<NavLink>


いくつかのコードサンプルはユーザーを助けます。レビューから
VaibhavVishal19年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.