Lợi ích của React Router v4 <NavLink> so với <Link>

Bên cạnh khả năng đặt "activeClassName" và "activeStyle" trên NavLink, có bất kỳ lý do gì để sử dụng NavLink qua Liên kết khi tạo liên kết đến các tuyến đường khác trên các phần tử không điều hướng (nghĩa là không phải điều hướng chính trong đầu trang hoặc chân trang) trên trang web của bạn không cần trạng thái / lớp hoạt động?

Các tài liệu chính thức là rõ ràng:

<NavLink>

Phiên bản đặc biệt của <Link>nó sẽ thêm các thuộc tính tạo kiểu vào phần tử được hiển thị khi nó khớp với URL hiện tại.

Vì vậy, câu trả lời là KHÔNG . Không có lý do nào khác ngoại trừ lý do đã đề cập.

Khi bạn cần sử dụng thuộc tính kiểu hoặc lớp trên hoạt động <Link>, thì bạn có thể sử dụng<NavLink>

Hãy xem ví dụ:

Liên kết

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

NavLink

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

Thành phần liên kết

Nó được sử dụng để tạo các liên kết cho phép điều hướng trên các URL khác nhau và Khi chúng ta nhấp vào bất kỳ Liên kết cụ thể nào , nó sẽ tải trang đó được liên kết với đường dẫn đó mà không cần tải lại trang. Thí dụ:

Thành phần NavLink:

Nếu, chúng tôi muốn thêm một số kiểu vào Liên kết. Vì vậy, khi chúng ta nhấp vào bất kỳ liên kết cụ thể nào, có thể dễ dàng xác định được Liên kết nào đang hoạt động. Đối với bộ định tuyến phản ứng này cung cấp NavLink thay vì Liên kết . Bây giờ thay thế Liên kết từ Navlink và thêm thuộc tính activeStyle . Các thuộc tính ActiveStyle có nghĩa là khi chúng ta nhấp vào Liên kết, nó sẽ được đánh dấu với kiểu khác nhau để chúng ta có thể phân biệt liên kết nào hiện đang hoạt động. Thí dụ:

Tham khảo: https://www.javatpoint.com/react-router

Đơn giản, khi bạn sử dụng <Link>không có bất kỳ hoạt động nào lớp trên phần tử đã chọn.
Ngược lại, với <NavLink>phần tử đã chọn được tô sáng vì phần tử này được thêm một lớp hoạt động.
Hy vọng hữu ích cho bạn.