如何在nextjs中添加活动的className

Question

我是Nextjs的新手。选择导航链接时，我必须具有活动的className。我在我的项目中使用Nextjs + react-bootstrap。我要实现的功能是，当有人单击特定链接时，应该更改其颜色

我的Navbar组件看起来像这样-

import React from "react";
import { Navbar, Nav, Button } from "react-bootstrap";
import Link from "next/link";
import "../../styles/Header.module.css";

const Header = () => {
  return (
    <div className="header">
      <Navbar expand="lg">
        <Link href="/">
          <Navbar.Brand style={{ padding: "8px 50px" }}>
            <img
              src="/logo.svg"
              left="60px"
              top="25px"
              width="112px"
              height="23px"
              className="d-inline-block align-top"
              alt="Openhouse logo"
            />
          </Navbar.Brand>
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
          <Nav className="ml-auto">
            <Link href="/classes" passHref>
              <Nav.Link style={{ padding: "8px 50px" }}>Classes</Nav.Link>
            </Link>
            <Link href="/clubs" passHref>
              <Nav.Link style={{ padding: "8px 50px" }}>Clubs</Nav.Link>
            </Link>
            <Link href="/aboutUs" passHref>
              <Nav.Link style={{ padding: "8px 50px" }}>AboutUs</Nav.Link>
            </Link>
          </Nav>
          <Button variant="warning" size="sm">
            Chat with us
          </Button>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
};

export default Header;