Quiero agregar una función de desplazamiento suave en mi sitio web de reacción. Tengo un componente de encabezado que contiene la barra de navegación que tiene tres enlaces relacionados con Inicio, Servicio, Acerca de. El Servicio y el Acerca de están vinculados a sus respectivos componentes, es decir, Service.js y Acerca de.js. Ahora he creado un componente de inicio que contiene los tres componentes en su interior, es decir, Hero, Service, About, por lo tanto, en la página de inicio, estos componentes se apilan uno debajo del otro. Quiero que cada vez que el usuario haga clic en los enlaces en el encabezado debería desplácese hacia abajo hasta ese componente específico en lugar de navegar hasta el componente y renderizarlo por separado.

Intenté usar el paquete react-scroll de un tutorial y funcionó como se esperaba, pero luego me di cuenta de que los enlaces ya no funcionan como enlaces reales. Entonces, un usuario, si supone que en la página de inicio de sesión, no es redirigido a la página de inicio si hace clic en el enlace de inicio o el enlace de servicio o sobre. Soy nuevo en reaccionar y no tengo idea de cómo hacerlo. Por favor, sugiérame una manera de hacer un desplazamiento suave.

A continuación se muestran los códigos.

Encabezado.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;

Inicio.js

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