我正在尝试创建一个网页，其中有一个带有几个导航项的React引导导航栏。我想滚动页面，以便在转到新部分时，该特定导航项带有下划线，或者在单击该导航项时，它会自动滚动到该项目。我尝试联机查找并找到了React滚动，但不知道如何将其链接到我的React引导代码。
这是我的导航栏组件

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

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