React Router v4 Zalety <NavLink> vs <Link>

97

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?

yam55
źródło
4
Nie mogę komentować bezpośrednio do TOUMI (ponieważ nie mam 50rep), więc dodam to tutaj. NavLinkutrzymuje właściwą fokus na stronie w celu zapewnienia dostępności. Podczas korzystania z linku początkowy fokus jest tracony podczas ładowania strony, a także zauważysz, że przewijanie list rozwijanych również nie działa podczas używania Link. NavLink rozwiązuje ten problem.
DJNorris,

Odpowiedzi:

142

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.

Abdennour TOUMI
źródło
44

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>
sułtan aslam
źródło
7

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:

wprowadź opis obrazu tutaj

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:

wprowadź opis obrazu tutaj

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

Santosh Singh
źródło
5

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.

Neo_
źródło
Niektóre próbki kodu pomogą użytkownikom. Z recenzji
Vaibhav Vishal