Estoy tratando de usar este paquete para implementar un desplazamiento suave dentro de una barra de navegación:
https://www.npmjs.com/package/react-scroll
Aquí está mi componente de barra de navegación:
Navbar.js
import React from "react"; import { Section1, Nav, NavLink, Bars, NavMenu } from "./NavbarElements"; import { Link, animateScroll as scroll } from "react-scroll"; const Navbar = () => { return ( <> <Section1> <Nav> <Bars /> <Link activeClass="active" to="section2" spy={true} smooth={true} offset={-70} duration={500} > Home </Link> <Link activeClass="active" to="section3" spy={true} smooth={true} offset={-70} duration={500} > Web </Link> <Link activeClass="active" to="section4" spy={true} smooth={true} offset={-70} duration={500} > Games </Link> <Link activeClass="active" to="section5" spy={true} smooth={true} offset={-70} duration={500} > About </Link> </Nav> </Section1> </> ); }; export default Navbar;y aquí está mi App.js
Aplicación.js
import React from "react"; import "./App.css"; import Navbar from "./components/navbar"; import HomeSection from "./components/home-section"; import WebSection from "./components/web-section"; import GameSection from "./components/games-section"; import AboutSection from "./components/about-section"; function App() { return ( <> <Navbar /> <HomeSection id="section2" /> <WebSection id="section3" /> <GameSection id="section4" /> <AboutSection id="section5" /> </> ); } export default App;¿Qué me estoy perdiendo? Pensé que había identificado todo correctamente, pero ¿quizás no? Lo siento, soy un novato. ¿Algún problema evidente aquí que me estoy perdiendo? ¿Hay una mejor manera de implementar el desplazamiento suave de una página con reaccionar?
La forma en que funciona el componente de reacción es que cualquier cosa que coloque en el soporte angular lo tomará como un accesorio aquí, no está configurando e identifica que está pasando el accesorio a sus componentes.
<HomeSection id="section2" /> //this is passing props to your homeSection Component
así es como puedes arreglarlo:
const HomeSection (props) =>{ return( <div id={props.id}> //your parent div </div> )o puedes envolverlo así
<div id="id="section2""> <HomeSection /> </div>Si alguien alguna vez ve esto y necesita una solución, debe envolver las etiquetas <Element> alrededor del componente de esta manera:
import { Element } from "react-scroll"; const HomeSection = () => { return ( <> <Element id="section2" name="home"> <Section2> /* CODE */ </Section2> </Element> </> ); }; export default HomeSection;