React underline react-bootstrap NavItem when scrolling down

Question

I am trying to make a webpage where I have a react-bootstrap navbar with a few Nav items. I want to scroll through the page so that when I go to a new section, that particular NavItem is underlined or when I click on that NavItem, it automatically scrolls me through to that item. I tried looking online and found react-scroll but do not know how to link it to my react-bootstrap code.

This is my Navbar Component

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>
      </>

This is my App.js

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

AboutComponent

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

I basically wanted to have different sections as above on one page where if I click on a particular navbar item, it underlines that item and scrolls me down to it (if I click on Pricing, it scrolls me down to the pricing section which has a bit of text and pictures).

Answer 1

If all you want, at-a-minimum, is for the links to navigate to a specific section and underline the active menu item then I suggest the following:

• Assign an id attribute to each "section" you care to link to.

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

• Use a hashlink in the nav items

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

• Add the CSS to style the active menu item link

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

This will scroll the sections into view so long as everything is rendered inline as a single continuous document. What I see when trying to make the navbar "sticky" or "fixed" to the top so it doesn't scroll with the content, the rest of the content needs to be placed in a scrollable container and the default "scrolling-to" behavior breaks. You can fix this with third-party libraries. In this next section I chose react-router-hash-link to create hashlinks that have control over how content is scrolled to.

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;
}