Đã giải quyết: bộ định tuyến phản ứng activeClassName

Vấn đề chính liên quan đến activeClassName trong React Router là nó không tự động cập nhật lớp đang hoạt động khi route thay đổi. Điều này có nghĩa là các nhà phát triển phải cập nhật lớp đang hoạt động theo cách thủ công bất cứ khi nào tuyến đường thay đổi, điều này có thể tốn thời gian và dễ xảy ra lỗi. Ngoài ra, nếu nhiều tuyến được lồng vào nhau, có thể khó theo dõi tuyến nào hiện đang hoạt động và lớp nào sẽ được áp dụng cho từng phần tử.

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1. Các thành phần được sử dụng để tạo bộ định tuyến trong React cho phép người dùng điều hướng giữa các trang khác nhau.

2. Các thành phần được sử dụng để tạo một liên kết mà khi được nhấp vào, sẽ đưa người dùng đến trang được chỉ định trong thuộc tính “đến” (trong trường hợp này là “/about”).

3. Thuộc tính activeClassName chỉ định lớp nào sẽ được áp dụng khi liên kết đang hoạt động (trong trường hợp này là “hoạt động”).

NavLink là gì

NavLink là một thành phần React được sử dụng trong React Router để tạo liên kết điều hướng giữa các route khác nhau trong một ứng dụng. Nó tương tự như thành phần Liên kết, nhưng nó thêm các thuộc tính kiểu dáng cho phần tử được hiển thị khi nó khớp với URL hiện tại. NavLink cũng cung cấp một chỗ dựa activeClassName có thể được sử dụng để áp dụng tên lớp khi tuyến của liên kết đang hoạt động.

thuộc tính activeClassName

Thuộc tính activeClassName trong React Router được sử dụng để chỉ định tên lớp sẽ được áp dụng cho phần tử khi nó khớp với URL hiện tại. Điều này hữu ích cho việc tạo kiểu cho các liên kết hoặc mục điều hướng khi chúng khớp với tuyến đường hiện tại. Nó cũng có thể được sử dụng để thêm kiểu dáng bổ sung cho các thành phần không liên quan trực tiếp đến định tuyến, chẳng hạn như đánh dấu tab hiện đang hoạt động trong thanh điều hướng.

Tại sao activeClassName không hoạt động

ActiveClassName là một tính năng của React Router cho phép bạn thêm một lớp vào liên kết hoạt động trong menu điều hướng. Thật không may, nó sẽ không hoạt động trong Bộ định tuyến React vì nó dựa trên API lịch sử của trình duyệt, không có sẵn trong Bộ định tuyến React. Điều này có nghĩa là React Router không thể phát hiện khi người dùng đã nhấp vào liên kết và áp dụng activeClassName tương ứng.

bài viết liên quan:

Để lại một bình luận