如何在 nextjs 中添加活动的 className

Posted 2023-02-22

【中文标题】如何在 nextjs 中添加活动的 className

【英文标题】：How to add active className in nextjs

【发布时间】：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"
              
              
              className="d-inline-block align-top"
              
            />
          </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

【参考方案1】：

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

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

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