Tengo una barra de navegación con varios enlaces y me gustaría poder llevar a un visitante al componente dedicado sin problemas al hacer clic en uno de los elementos de navegación. Todos los componentes están debajo de la barra de navegación mientras me desplazo por la aplicación. Sé cómo se puede hacer simplemente con HTML y CSS cuando se crea un sitio web estático, pero como traté de hacer lo mismo en React, obviamente no funcionó. ¿Es posible hacerlo solo con React, sin usar ningún paquete (React Router, react-scroll, etc.)? Si es así, ¿cómo puedo hacerlo?
Para referencia solo con HTML y CSS: https://codesandbox.io/s/objective-ganguly-fzqnrz?file=/index.html
Esto es lo que me gustaría poder hacer, pero con una transición suave y sin paquetes. Aquí está el código:
Navigation.js (los href son solo marcadores de posición para ilustrar la idea)
const Navigation = () => { return ( <header> <nav> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#projects">Projects</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </nav> </header> ); }; export default Navigation;Acerca de.js
const About = () => { return ( <div> <div> <p> {/* Content here... */} </p> </div> </div> ); }; export default About;No tiene nada que ver con React , es solo el comportamiento de html y css que debes hacer algunos ajustes para ver el comportamiento fluido, algo como esto:
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* here is what you need to add to your code */ html { scroll-behavior: smooth; } #navigation { background-color: rgb(101, 255, 55); } #navbar { margin: 0 auto; height: 60px; } ul { list-style-type: none; overflow: hidden; float: right; } li { float: left; font-size: 20px; margin-left: 10px; } li a { display: block; color: #000; text-align: center; padding: 18px 18px; border-radius: 20px; text-decoration: none; } li a:hover { color: #232cfa; } #content { width: 100%; height: 500px; background-color: aqua; } #content-2 { height: 200px; background-color: salmon; } #footer { height: 100px; background-color: aquamarine; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Navigation Redirect</title> </head> <body> <header id="navigation"> <nav id="navbar"> <ul> <li> <a href="#content">Content 1</a> </li> <li> <a href="#content-2">Content 2</a> </li> <li> <a href="#footer">Footer</a> </li> </ul> </nav> </header> <div id="content"> <h1>Content</h1> </div> <div id="content-2"> <h2>Content 2</h2> </div> <footer id="footer"> <h3>Footer</h3> </footer> </body> </html>si desea ver el código de sandbox, consulte este enlace: https://codesandbox.io/s/festive-cdn-t2jzgf?file=/index.html:0-844
y si quieres trabajar con elements ref en React puedes usarlo de esta manera
element.scrollIntoView({behavior: "smooth"}); Según su estructura de archivos, esto podría ser un poco más difícil de pasar las referencias a sus componentes de Navigation , por lo que sugiero ir con la forma CSS