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

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

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

<NavLink>

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

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

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

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

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

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

NavLink

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

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

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

Компонент NavLink:

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

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

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