Highlight liên kết đang hoạt động trong React Router

Giả sử chúng ta đã thêm một số sản phẩm vào ứng dụng của mình và đang xem từng sản phẩm. Làm thế nào chúng ta biết được hiện tại đang ở trang của sản phẩm nào? Hãy đánh dấu sản phẩm đó trong danh sách, ví dụ bằng phông chữ đậm và màu nâu, còn nếu liên kết đang tải thì để màu xám.

Đầu tiên, hãy truy cập trang chủ, thêm 4 sản phẩm vào danh sách và nhập dữ liệu cho từng sản phẩm. Đặt cho chúng bất kỳ tên nào.

Trong việc làm nổi bật liên kết đang hoạt động, chúng ta sẽ được hỗ trợ bởi thành phần NavLink, đây là một dạng phụ của thành phần Link, nó biết về trạng thái của dữ liệu. Thông thường nó được áp dụng khi tạo menu điều hướng.

Hãy mở root.jsx và import NavLink (nhớ bỏ import Link, nếu không React có thể báo lỗi, vì chúng ta không còn sử dụng nó nữa):

import { NavLink } from 'react-router-dom';

Sau đó, trong bố cục, hãy thay thế thành phần Link bằng NavLink:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

Và thêm prop className cho nó, đồng thời sử dụng logic điều kiện. Nếu trang đã tải xong, liên kết sẽ chuyển sang trạng thái hoạt động, nếu đang tải, thì sang trạng thái đang tải, còn nếu không có gì xảy ra, thì nó sẽ giữ nguyên. Tùy thuộc vào điều này, lớp CSS của liên kết sẽ thay đổi:

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

Chúng ta cần thêm kiểu cho lớp active và loading vào tệp css của mình:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

Hoàn thành! Bây giờ hãy nhấp vào các sản phẩm trong danh sách.

Hãy lấy ứng dụng bạn đã tạo trong các bài tập của các bài học trước. Sử dụng tài liệu của bài học, hãy triển khai trong đó việc làm nổi bật liên kết đang hoạt động cho danh sách sinh viên sao cho có thể hiểu được dữ liệu của sinh viên nào mà người dùng hiện đang xem.