添加react-anchor-link-smooth-scroll后React Navbar出现问题

Question

navbar.jsx代码：

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;

我在创建 React.js 项目时遇到了问题。运行

npm install react-anchor-link-smooth-scroll

并将锚链接添加到我的代码后，屏幕变为空白，我在控制台中看到多个错误。我非常感谢您帮助解决这个问题，因为它影响了我的项目。

Answer 1

我删除了节点模块文件夹和包锁并运行 npm install ，这解决了我的问题。