如何在 nextjs 中添加活动的 className答案

【问题标题】：How to add active className in nextjs如何在 nextjs 中添加活动的 className
【发布时间】：2020-12-06 16:45:32
【问题描述】：

我是 Nextjs 的新手。选择导航链接时，我必须有一个活动的类名。我在我的项目中使用 Nextjs+react-bootstrap。我要实现的功能是当有人点击特定链接时，它的颜色应该改变

我的导航栏组件看起来像这样 -

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;

【问题讨论】：

查看thread

标签： javascript reactjs next.js react-bootstrap

【解决方案1】：

这种特殊版本的 Link 标记称为 NavLink，当它与当前 URL 匹配时，它会向呈现的元素添加样式属性

当元素处于活动状态时，通过写入将类赋予：

<NavLink to="/about" activeClassName="active">
  About
</NavLink>'

【讨论】：