navbar.jsx code:
import React, { useState } from 'react';
import './Navbar.css';
import logo from '../../assets/logo.svg';
import underline from '../../assets/nav_underline.svg';
import { AnchorLink } from 'react-anchor-link-smooth-scroll';
const Navbar = () => {
const [menu, setMenu] = useState("home");
return (
<div className='navbar'>
<img src={logo} alt="" />
<ul className="nav-menu">
<li>
<AnchorLink href='#home' onClick={() => setMenu("home")}>Home</AnchorLink>
{menu === "home" ? <img src={underline} alt='' /> : <></>}
</li>
<li>
<AnchorLink href='#about' onClick={() => setMenu("about")}>About Me</AnchorLink>
{menu === "about" ? <img src={underline} alt='' /> : <></>}
</li>
<li>
<AnchorLink href='#services' onClick={() => setMenu("services")}>Services</AnchorLink>
{menu === "services" ? <img src={underline} alt='' /> : <></>}
</li>
<li>
<AnchorLink href='#work' onClick={() => setMenu("work")}>Portfolio</AnchorLink>
{menu === "work" ? <img src={underline} alt='' /> : <></>}
</li>
<li>
<AnchorLink href='#contact' onClick={() => setMenu("contact")}>Contact</AnchorLink>
{menu === "contact" ? <img src={underline} alt='' /> : <></>}
</li>
</ul>
<div className="nav-connect">Connect With Me</div>
</div>
);
};
export default Navbar;
I encountered an issue while creating a React.js project. After running npm install react-anchor-link-smooth-scroll and adding anchor links to my code, the screen goes blank and I see multiple errors in the console. I would appreciate assistance with resolving this issue as it is affecting my project.