React Router v4 <NavLink> против <Link> преимущества

94

Помимо возможности установить «activeClassName» и «activeStyle» в NavLink, есть ли причина использовать NavLink поверх Link при создании ссылок на другие маршруты на элементах, не связанных с навигацией (т.е. не в главной навигации в верхнем или нижнем колонтитуле) на вашем сайте которым не нужно активное состояние / класс?

yam55
источник
4
Я не могу комментировать TOUMI напрямую (потому что у меня нет 50rep), поэтому я добавлю его сюда. NavLinkсохраняет правильную фокусировку на странице для доступности. При использовании ссылки первоначальный фокус теряется при загрузке страницы, и вы также заметите, что табуляция по раскрывающимся спискам также прерывается при использовании Link. NavLink исправляет это.
DJNorris

Ответы:

137

Официальная документация ясна:

<NavLink>

Специальная версия, <Link>которая будет добавлять атрибуты стиля к отображаемому элементу, когда он соответствует текущему URL-адресу.

Таким образом, ответ - НЕТ . Других причин, кроме указанной, нет.

Абденнур Туми
источник
42

Когда вам нужно использовать атрибуты стиля или класса в активном состоянии <Link>, вы можете использовать<NavLink>

Посмотрим на пример:

Ссылка на сайт

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

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>
султан аслам
источник
7

Компонент связи

Он используется для создания ссылок, которые позволяют перемещаться по разным URL-адресам, и когда мы нажимаем на любую из этих ссылок , она должна загружать ту страницу, которая связана с этим путем, без перезагрузки страницы. Пример:

введите описание изображения здесь

Компонент NavLink:

Если мы хотим добавить несколько стилей в Link. Таким образом, когда мы нажимаем на любую конкретную ссылку, можно легко определить, какая ссылка активна. Для этой реакции маршрутизатор предоставляет NavLink вместо Link . Теперь замените Link из Navlink и добавьте свойства activeStyle . Эти activeStyle свойства означают , когда мы нажимаем на ссылку, она должна быть выделена с различным стилем , так что мы можем различать , какой канал связи в данный момент. Пример:

введите описание изображения здесь

Ссылка: https://www.javatpoint.com/react-router

Сантош Сингх
источник
5

Просто, когда вы используете, для выбранного элемента <Link>нет активного класса.
Напротив, <NavLink>выбранный элемент выделяется, потому что к этому элементу добавляется активный класс.
Надеюсь, вам пригодится.

Нео_
источник
Некоторый пример кода поможет пользователям. Из отзыва
Вайбхав Вишал