I want to add smooth scrolling feature in my react website. I have a header component that holds the navigation bar which has three links concerned Home, Service, About. The Service and the About is linked to their respective components i.e. Service.js and About.js. Now I have a made a Home component that holds the three components inside it ie, Hero, Service, About, hence, in the home page these components are stacked below eachother .I want that whenever the user clicks the Links in the header it should scroll down to that sepcific component rather then navigating to the component and rendering it seperately.

I tried using react-scroll package from a tutorial and it worked as expected but then I realised that the links don't work anymore as real links. So a user if suppose in the login page he doesn't get redirected to the home page if he clicks the home link or the service link or the about. I am new to react and have no idea how to do it. Please suggest me a way to make smooth scrolling.

Below are the codes.

Header.js

function Header() {
  return (
    <Nav>
      <Link to="/">
        <Logo src="/images/logo_name_header.svg" />
      </Link>

      <NavMenu>
        <ul>
          <li>
            <Link to="/">
              <span>Home</span>
            </Link>
          </li>
          <li>
            <Link to="/service">
              <span>Service</span>
            </Link>
          </li>

          <li>
            <Link to="/about-us">
              <span>About Us</span>
            </Link>
          </li>
          <li>
            <Link to="/contact">
              <span>Contact Us</span>
            </Link>
          </li>

          <li>
            <Link to="/register">
              <div className="cta-register">Register</div>
            </Link>
          </li>

          <li>
            <Link to="/login">
              <span>Login</span>
            </Link>
          </li>
        </ul>
      </NavMenu>
    </Nav>
  );
}

export default Header;

Home.js

function Home() {
  return (
    <Container>
      <Hero />
      <Service />
      <About />
    </Container>
  );
}

export default Home;