向下滚动时反应下划线 react-bootstrap NavItem

Question

我正在尝试制作一个网页，其中有一个带有一些 Nav 项目的 react-bootstrap 导航栏。 我想滚动页面，这样当我 go 到一个新部分时，那个特定的 NavItem 带有下划线，或者当我点击那个 NavItem 时，它会自动滚动到那个项目。 我尝试在线查找并找到了 react-scroll 但不知道如何将其链接到我的 react-bootstrap 代码。

这是我的导航栏组件

export const NavbarComponent = () => {
    return (
      <>
      <Navbar collapseOnSelect className="style-navbar">
        <Container>
          <Navbar.Brand className="style-navbrand" href="/">
              <div class="inl">LOGO</div>
              <div className="style-subheading"Subheading</div>
          </Navbar.Brand>
          <Nav className="style-nav">
          <Nav.Item className="style-navitem">
            <Nav.Link className="style-navlink" href="/home">ABOUT</Nav.Link>
           </Nav.Item>
           <Nav.Item className="style-navitem">
            <Nav.Link className="style-navlink" href="/members">MEMBERS</Nav.Link>
            </Nav.Item>
            <Nav.Item className="style-navitem">
            <Nav.Link className="style-navlink" href="/pricing">Pricing</Nav.Link>
            </Nav.Item>
          </Nav>
          <Nav>
              <Nav.Link id="style-navlink" href="/contact">CONTACT</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      </>

这是我的 App.js

  return (
    <div className="style-background">
      <div className = "style-backg-sheet">
        <NavbarComponent/>
        <AboutComponent/>
        <MemberComponent/>
        <PricingComponent/>
      </div>
    </div>
  );
}

关于组件

import React from 'react'
import {Container} from 'react-bootstrap';

const About = () => {
    return (
        <div>
            <Container>
                <h1>About</h1>
                <p>Some text</p>
            </Container>
        </div>
    )
}

export default About

我基本上想在一页上有不同的部分，如果我点击一个特定的导航栏项目，它会在该项目下划线并向下滚动到它（如果我点击定价，它会向下滚动到定价部分，其中有一个一些文字和图片）。

Answer 1

如果您至少想要的是链接导航到特定部分并在活动菜单项下划线，那么我建议如下：

• 为您要链接到的每个“部分”分配一个id属性。

   const About = () => { return ( <div className="section" id="about"> // <-- add id for each section <Container> <h1>About</h1> <p>Some text</p> </Container> </div> ); };

• 在导航项中使用哈希链接

  <Nav.Link className="style-navlink" href="#about"> About </Nav.Link>

• 添加 CSS 以设置活动菜单项链接的样式

  a.style-navlink.active { color: #000; font-weight: bold; text-decoration: underline; }

只要所有内容都内联呈现为单个连续文档，这就会将这些部分滚动到视图中。 我在尝试使导航栏“粘滞”或“固定”到顶部以使其不随内容滚动时看到的内容，内容的 rest 需要放置在可滚动容器中，默认为“滚动到”行为中断。 您可以使用第三方库修复此问题。 在下一节中，我选择了react-router-hash-link来创建可以控制内容滚动方式的哈希链接。

import { NavHashLink } from "react-router-hash-link";

...

<Nav.Link
  activeClassName="active-link" // <-- define active classname
  as={NavHashLink}              // <-- render NavHashLink component
  className="style-navlink"
  smooth                        // <-- smooth scrolling
  to="#about"
>
  About
</Nav.Link>

...

.active-link {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}