Переваги React Router v4 <NavLink> проти <Link>

Окрім можливості встановити "activeClassName" та "activeStyle" на NavLink, чи є якась причина використовувати NavLink over Link під час створення посилань на інші маршрути на не-навігаційних елементах (тобто. Не основна навігація у верхньому або нижньому колонтитулі) на вашому сайті які не потребують активного стану / класу?

Офіційна документація ясна:

<NavLink>

Спеціальна версія, <Link>яка додасть атрибути стилю до відтвореного елемента, коли він відповідає поточній URL-адресі.

Таким чином, відповідь - НІ . Інших причин, крім згаданої, немає.

Коли вам потрібно використовувати атрибути стилю або класу на active <Link>, тоді ви можете використовувати<NavLink>

Подивимось приклад:

Посилання

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

NavLink

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

Компонент посилання

Він використовується для створення посилань, які дозволяють здійснювати навігацію за різними URL-адресами. Коли ми натискаємо будь-яке конкретне посилання , воно повинно завантажувати сторінку, яка пов’язана з цим шляхом, не перезавантажуючи сторінку. Приклад:

Компонент NavLink:

Якщо ми хочемо додати кілька стилів до Посилання. Таким чином, коли ми натискаємо будь-яке конкретне посилання, можна легко визначити, яке посилання активне. Для цієї реакції маршрутизатор забезпечує NavLink замість Link . Тепер замініть Link з Navlink і додайте властивості activeStyle . Ці activeStyle властивості означають , коли ми натискаємо на посилання, вона повинна бути виділена з різним стилем , так що ми можемо розрізняти , який канал зв'язку в даний момент. Приклад:

Посилання: https://www.javatpoint.com/react-router

Просто, коли ви використовуєте, для вибраного елемента <Link>немає активного класу.
На відміну від <NavLink>цього, виділений елемент виділено, оскільки до цього елемента додано активний клас.
Сподіваюся, корисний для вас.