React Router Highlight Active Link: Cách Thực Hiện Và Ví Dụ Minh Họa

React Router là một thư viện mạnh mẽ cho phép bạn quản lý các tuyến đường trong ứng dụng React của mình. Một trong những tính năng phổ biến của React Router là khả năng làm nổi bật các liên kết đang hoạt động. Điều này tạo ra một trải nghiệm người dùng liền mạch và dễ điều hướng, giúp người dùng dễ dàng theo dõi vị trí hiện tại của họ trong ứng dụng. Trong bài viết này, chúng ta sẽ tìm hiểu cách làm nổi bật các liên kết đang hoạt động trong React Router, kèm theo ví dụ minh họa để giúp bạn hiểu rõ hơn về quá trình này.

Sử dụng CSS cho Highlight Active Link

Cách đơn giản nhất để làm nổi bật các liên kết đang hoạt động là sử dụng CSS. Bạn có thể thêm một lớp CSS cho liên kết đang hoạt động và sử dụng thuộc tính active của React Router để áp dụng lớp đó.

import { Link, useLocation } from "react-router-dom";

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <ul>
        <li>
          <Link to="/" className={location.pathname === "/" ? "active" : ""}>
            Trang chủ
          </Link>
        </li>
        <li>
          <Link
            to="/about"
            className={location.pathname === "/about" ? "active" : ""}
          >
            Giới thiệu
          </Link>
        </li>
      </ul>
    </div>
  );
}

export default MyComponent;

.active {
  font-weight: bold;
  color: blue;
}

Trong ví dụ trên, chúng ta sử dụng hook useLocation để lấy đường dẫn hiện tại của ứng dụng. Sau đó, chúng ta so sánh đường dẫn hiện tại với đường dẫn của mỗi liên kết. Nếu đường dẫn hiện tại khớp với đường dẫn của liên kết, lớp active sẽ được áp dụng cho liên kết đó.

Sử dụng React Router v6 useMatch

React Router v6 cung cấp hook useMatch để kiểm tra xem đường dẫn hiện tại có khớp với một mẫu cụ thể hay không. Bạn có thể sử dụng useMatch để làm nổi bật các liên kết đang hoạt động một cách linh hoạt và rõ ràng hơn.

import { Link, useMatch } from "react-router-dom";

function MyComponent() {
  const isHomeMatch = useMatch("/");
  const isAboutMatch = useMatch("/about");

  return (
    <div>
      <ul>
        <li>
          <Link to="/" className={isHomeMatch ? "active" : ""}>
            Trang chủ
          </Link>
        </li>
        <li>
          <Link to="/about" className={isAboutMatch ? "active" : ""}>
            Giới thiệu
          </Link>
        </li>
      </ul>
    </div>
  );
}

export default MyComponent;

Trong ví dụ này, useMatch được sử dụng để kiểm tra xem đường dẫn hiện tại có khớp với / hoặc /about hay không. Nếu khớp, lớp active sẽ được áp dụng cho liên kết tương ứng.

Sử dụng styled-components

Nếu bạn đang sử dụng styled-components, bạn có thể dễ dàng tạo kiểu cho các liên kết đang hoạt động bằng cách sử dụng props.

import styled from "styled-components";
import { Link, useMatch } from "react-router-dom";

const StyledLink = styled(Link)`
  font-weight: ${(props) => (props.isActive ? "bold" : "normal")};
  color: ${(props) => (props.isActive ? "blue" : "black")};
`;

function MyComponent() {
  const isHomeMatch = useMatch("/");
  const isAboutMatch = useMatch("/about");

  return (
    <div>
      <ul>
        <li>
          <StyledLink to="/" isActive={isHomeMatch}>
            Trang chủ
          </StyledLink>
        </li>
        <li>
          <StyledLink to="/about" isActive={isAboutMatch}>
            Giới thiệu
          </StyledLink>
        </li>
      </ul>
    </div>
  );
}

export default MyComponent;

Ưu điểm và Nhược điểm

Ưu điểm

• Dễ thực hiện: Các phương pháp trên rất dễ thực hiện và có thể được áp dụng cho bất kỳ ứng dụng React Router nào.
• Tăng khả năng sử dụng: Làm nổi bật các liên kết đang hoạt động giúp cải thiện khả năng sử dụng của ứng dụng, giúp người dùng dễ dàng theo dõi vị trí hiện tại của họ.
• Tùy chỉnh: Bạn có thể tùy chỉnh kiểu dáng của các liên kết đang hoạt động theo ý muốn, phù hợp với thiết kế của ứng dụng.

Nhược điểm

• Tùy thuộc vào thư viện: Cách thực hiện có thể thay đổi tùy theo phiên bản React Router bạn đang sử dụng.
• Có thể phức tạp: Nếu bạn có nhiều tuyến đường phức tạp, việc làm nổi bật các liên kết đang hoạt động có thể trở nên phức tạp hơn.

Khuyến nghị

Lựa chọn phương pháp làm nổi bật các liên kết đang hoạt động phù hợp nhất với dự án của bạn. Nếu bạn đang tìm kiếm một giải pháp đơn giản và hiệu quả, phương pháp sử dụng CSS là một lựa chọn tốt. Nếu bạn cần một giải pháp linh hoạt hơn, useMatch là một lựa chọn phù hợp.

FAQ

Q: Tôi có thể sử dụng các phương pháp này để làm nổi bật các liên kết bên trong một tab hoặc modal?

A: Có, bạn hoàn toàn có thể sử dụng các phương pháp này để làm nổi bật các liên kết bên trong một tab hoặc modal. Bạn chỉ cần đảm bảo rằng các liên kết được đặt bên trong một thành phần con và bạn đang sử dụng React Router để quản lý các tuyến đường.

Q: Làm cách nào để làm nổi bật các liên kết con trong một menu dropdown?

A: Bạn có thể sử dụng cùng một kỹ thuật để làm nổi bật các liên kết con. Bạn chỉ cần đảm bảo rằng các liên kết con cũng có thuộc tính to và bạn sử dụng useMatch để kiểm tra xem đường dẫn hiện tại có khớp với đường dẫn của liên kết con hay không.

Q: Làm cách nào để thay đổi màu nền của liên kết đang hoạt động?

A: Bạn có thể thêm một thuộc tính backgroundColor vào lớp CSS active. Ví dụ:

.active {
  font-weight: bold;
  color: blue;
  background-color: #f0f0f0;
}

Kết luận

Làm nổi bật các liên kết đang hoạt động là một tính năng quan trọng giúp cải thiện khả năng sử dụng của ứng dụng React Router. Bạn có thể sử dụng CSS, useMatch hoặc styled-components để thực hiện điều này. Hãy chọn phương pháp phù hợp nhất với nhu cầu của bạn và tận hưởng một trải nghiệm người dùng liền mạch!