实现React-Bootstrap导航项滚动高亮与点击滚动定位

步骤1：安装react-scroll #

先安装依赖包：

npm install react-scroll
# 或使用yarn
yarn add react-scroll

步骤2：给页面区域添加唯一ID #

在App.js中，给每个需要跳转的组件外层包裹带唯一ID的div，确保ID和导航项一一对应：

return (
  <div className="style-background">
    <div className="style-backg-sheet">
      <NavbarComponent/>
      {/* 给About区域加ID */}
      <div id="about">
        <AboutComponent/>
      </div>
      {/* 给Members区域加ID */}
      <div id="members">
        <MemberComponent/>
      </div>
      {/* 给Pricing区域加ID */}
      <div id="pricing">
        <PricingComponent/>
      </div>
      {/* 给Contact区域加ID（如果有对应组件） */}
      <div id="contact">
        {/* <ContactComponent/> */}
      </div>
    </div>
  </div>
);

步骤3：重构Navbar组件，替换为react-scroll的Link #

修改NavbarComponent，用react-scroll提供的Link组件替换原生Nav.Link，同时配置滚动和高亮规则：

import { Link, animateScroll as scroll } from 'react-scroll';
import { Navbar, Container, Nav } from 'react-bootstrap';

export const NavbarComponent = () => {
  return (
    <>
      <Navbar collapseOnSelect className="style-navbar">
        <Container>
          {/* 点击LOGO回到顶部 */}
          <Navbar.Brand 
            className="style-navbrand" 
            onClick={() => scroll.scrollToTop()}
            style={{cursor: 'pointer'}}
          >
            <div className="inl">LOGO</div>
            <div className="style-subheading">Subheading</div>
          </Navbar.Brand>
          <Nav className="style-nav">
            <Nav.Item className="style-navitem">
              <Link
                className="style-navlink"
                to="about"
                spy={true}
                smooth={true}
                offset={-70} {/* 调整偏移，避免被顶部Navbar遮挡 */}
                duration={500}
                activeClass="active-navlink"
              >
                ABOUT
              </Link>
            </Nav.Item>
            <Nav.Item className="style-navitem">
              <Link
                className="style-navlink"
                to="members"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
                activeClass="active-navlink"
              >
                MEMBERS
              </Link>
            </Nav.Item>
            <Nav.Item className="style-navitem">
              <Link
                className="style-navlink"
                to="pricing"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
                activeClass="active-navlink"
              >
                Pricing
              </Link>
            </Nav.Item>
          </Nav>
          <Nav>
            <Link
              className="style-navlink"
              to="contact"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              activeClass="active-navlink"
            >
              CONTACT
            </Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
};

步骤4：添加高亮样式 #

在全局CSS文件中，给激活状态的导航项添加下划线样式：

.active-navlink {
  text-decoration: underline !important;
  text-underline-offset: 4px; /* 调整下划线与文字的间距 */
  /* 可自定义下划线颜色 */
  text-decoration-color: #2c3e50;
}

关键配置说明 #

• spy={true}：开启滚动监听，自动检测当前视图中的区域，为对应导航项添加activeClass
• smooth={true}：启用平滑滚动动画
• offset：设置滚动偏移量，适配顶部固定Navbar，避免目标区域被遮挡，数值可根据Navbar高度调整
• duration：滚动动画的时长，单位为毫秒
• activeClass：导航项处于激活状态时的类名，用来实现高亮效果

注意事项 #

• 确保区域ID和Link组件的to属性值完全匹配（大小写敏感）
• 如果Navbar不是固定定位，可去掉offset配置
• 可根据需求调整duration和offset的值，优化滚动体验

内容的提问来源于stack exchange，提问作者xyz6675