Im trying to use this package to implement smooth scroll within a Navbar:
https://www.npmjs.com/package/react-scroll
Here's my navbar component:
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;
and here's my App.js
App.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;
What am I missing? I thought I ID'd everything correctly but maybe not? Sorry im a noob. Any glaring issues here I'm missing? Is there a better way to implement one page smooth scrolling with react?
The way react component works that anything you put in the angle bracket its gonna take it as a props here you are not setting up and id you are passing down the prop to your components
<HomeSection id="section2" /> //this is passing props to your homeSection Component
here is how you can fix it:
const HomeSection (props) =>{
return(
<div id={props.id}> //your parent div
</div>
)
or you can wrap it like that
<div id="id="section2"">
<HomeSection />
</div>
If anyone ever sees this and needs a solution, you need to wrap <Element> tags around the component like so:
import { Element } from "react-scroll";
const HomeSection = () => {
return (
<>
<Element id="section2" name="home">
<Section2>
/* CODE */
</Section2>
</Element>
</>
);
};
export default HomeSection;