React Router v4 Zalety <NavLink> vs <Link>

Oprócz możliwości ustawienia „activeClassName” i „activeStyle” w NavLink, czy istnieje jakikolwiek powód, aby używać NavLink over Link podczas tworzenia łączy do innych tras na elementach niezwiązanych z nawigacją (tj. Nie jest to główna nawigacja w nagłówku lub stopce) w Twojej witrynie które nie potrzebują aktywnego stanu / klasy?

Oficjalna dokumentacja jest jasne:

<NavLink>

Specjalna wersja <Link>, która doda atrybuty stylu do renderowanego elementu, gdy pasuje do bieżącego adresu URL.

Zatem odpowiedź brzmi NIE . Nie ma innych powodów poza wymienionym.

Kiedy potrzebujesz użyć atrybutów stylu lub klasy na active <Link>, możesz użyć<NavLink>

Zobaczmy przykład:

Połączyć

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

NavLink

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

Połącz komponent

Służy do tworzenia linków, które umożliwiają nawigację po różnych adresach URL, a kiedy klikniemy na którykolwiek z tych linków , powinien załadować tę stronę, która jest powiązana z tą ścieżką, bez przeładowywania strony. Przykład:

Składnik NavLink:

Jeśli chcemy dodać kilka stylów do łącza. Dzięki temu po kliknięciu dowolnego łącza można łatwo zidentyfikować, który link jest aktywny. W tym przypadku router zapewnia NavLink zamiast Link . Teraz zamień Link z Navlink i dodaj właściwości activeStyle . Właściwości activeStyle oznaczają, że po kliknięciu łącza należy je wyróżnić innym stylem, abyśmy mogli rozróżnić, które łącze jest aktualnie aktywne. Przykład:

Ref: https://www.javatpoint.com/react-router

Po prostu, kiedy używasz, <Link>nie ma żadnej aktywnej klasy na wybranym elemencie.
Natomiast przy <NavLink>wybranym elemencie jest podświetlony, ponieważ do tego elementu dodaje się aktywną klasę.
Mam nadzieję, że ci się przyda.