我的一个 Navabr 链接不起作用 reactjs/Three.js？

Question

我正在关注一个 youtube 视频（three.js）来制作网络作品集。现在我根据我想要的链接对组件进行了一些更改。其中一个链接（即指向项目的链接）不起作用，但关于和联系的其他两个链接正在起作用，我可以跳转到那些组件。我尝试调试代码，但我不知道 id 的来源，如果有人可以查看我的代码，那就太好了。

导航栏.js

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { styles } from '../styles';
import { navLinks } from "../constants";
import { logo, menu, close } from '../assets';

const Navbar = () => {
  const [active, setActive] = useState("");
  const [toggle, setToggle]=useState(false);

  return (
    <nav className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20 bg-primary`}>
      <div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
        <Link to ="/" className='flex items-center gap-2' onClick
        ={()=>{
          setActive("");window.scrollTo(0,0);
        }}>   <img src={logo} alt='logo' className='w-9 h-9 object-contain' />
          <p className='text-white text-[18px] font-bold cursor-pointer'>
            ar &nbsp; <span className='sm:block hidden'></span></p>
         </Link>
         <ul className='list-none hidden sm:flex flex-row gap-10'>
          {navLinks.map((link)=>(
            <li key={link.id} className={`${active === link.title ? "text-white":"text-secondary"}
            hover:text-white text-[18px] font-medium cursor-pointer
            `}
            onClick={()=> setActive(link.title)}
              
            >
              <a href={`#${link.id}`}>{link.title}</a>
              {/* <Link to={`#${link.id}`}>{link.title}</Link> */}
              
            </li>
          ))}

         </ul>
         <div className='sm:hidden flex flex-1 justify-end items-center'>
          <img src={toggle?close:menu} alt="menu" className='w-[28px] h-[28px] object-contain cursor-pointer'
          onClick={()=>setToggle(!toggle)}/>
          <div className={`${!toggle ? 'hidden' :'flex'} p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl` }>
          <ul className='list-none flex justify-end items-start flex-col gap-4'>
          {navLinks.map((link)=>(
            <li key={link.id} className={`${active === link.title ? "text-white":"text-secondary"}
            font-poppins font-medium cursor-pointer text-[16px]
            `}
            onClick={()=>{ setToggle(!toggle) ; setActive(link.title)}}
              
            >
              <a href={`#${link.id}`}>{link.title}</a>
              {/* <Link to={`#${link.id}`}>{link.title}</Link> */}
            </li>
          ))}

         </ul>
          </div>
         </div>
         
      </div>

    </nav>
  )
}

export default Navbar

常量/index.js中

export const navLinks = [
  {
    id: "about",
    title: "About",
  },
  {
    id: "work",
    title: "Project",
  },
  {
    id: "contact",
    title: "Contact",
  },
];

App.js

import { BrowserRouter } from "react-router-dom";
import {
  About,
  Contact,
  Experience,
  StarsCanvas,
  Works,
  Tech,
  Navbar,
  Hero,
  Feedbacks
} from "./components";

const App = () => {
  return (
    <BrowserRouter>
      <div className="relative z-0 bg-primary" >
        <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
          <Navbar />
          <Hero />
        </div>
        <About />
        <Experience />
        <Tech />
        <Works />
        <Feedbacks />
        <div className="relative z-0">
          <Contact />
          <StarsCanvas />
        </div>
      </div>
    </BrowserRouter>
  )
}

export default App

这是文件结构