¿Qué estoy haciendo mal con este desplazamiento de reacción? Quiero hacer clic en el enlace de la barra de navegación y desplazarme suavemente a la sección correspondiente en la misma página. Sin embargo, hacer clic en los elementos de navegación no hace nada. ¿Alguien puede ayudarme con por qué esto no funciona?
Ejecuté npm install react-scroll.
Aplicación.js
import './App.css'; import React from 'react'; import Navbar from './components/Navbar/Navbar'; import About from './components/About/About'; import Skills from './components/Skills/Skills'; function App() { return ( <React.Fragment> <header> <Navbar /> </header> <main> <About id='about' /> <Skills id='skills' /> </main> </React.Fragment> ); } export default App;Navbar.js
import { Link as LinkScroll } from 'react-scroll'; const Navbar = () => { return ( <nav> <LinkScroll activeClass='active' to='about' spy={true} smooth={true} offset={-70} duration={500} > About </LinkScroll> <LinkScroll activeClass='active' to='skills' spy={true} smooth={true} offset={-70} duration={500} > Skills </LinkScroll> </nav> ); }; export default Navbar;Quitar id de las etiquetas de componentes:
<main> <About /> <Skills /> </main>Luego agregue estos id en la pestaña raíz para estos componentes. Suponiendo que su componente es:
import React from "react"; export default ({ name }) => ( <div id="skills" style={{ height: "500px" }}> <h1>Hello {name}!</h1> </div> );