当我点击关于、体验等按钮时。它没有将我引导到页面，但是如果我键入该页面的端点，它会工作，所以http：//localhost：3000/#about，那么为什么当该部分存在时，我的按钮没有将我带到那里。这里是代码。

import { Cursor, useTypewriter } from 'react-simple-typewriter';
import Image from 'next/image';
import React from 'react'
import BackgroundCircles from './BackgroundCircles';
import imageofme from '../public/imageofme.png';
import Link from 'next/link';

type Props = {}

export default function Hero({}: Props) {
  const [text,count] = useTypewriter({
    words: ['Hello World', 'Welcome to my website', 'I am a web developer'],
    loop: true,
  delaySpeed: 2000,
  })

  return (
    <div className='h-screen flex flex-col space-y-8 items-center justify-center
    text-center overflow-hidden'>
      <BackgroundCircles/>
      <Image className='relative rounded-fill h32 w-32 mx-auto object-cover'
      src={imageofme} 
      alt='image of me' />
      <div className='z-20'>
        <h2 className='text-sm uppercase text-gray-500 pb-2 tracking-[15px]'>
        Junior Software Developer
        </h2>
      <h1 className='text-5xl lg:text-6xl font-semibold px-10'>
      <span className='mr-3'>{text}</span>
      <Cursor cursorColor='black'/>
      </h1>
      <div className='pt-5'>
        <Link href='#about'>
        <button className='heroButton'>About</button>
        </Link>
        <Link href='#experience'>
        <button className='heroButton'>Experience</button>
        </Link>
        <Link href='#skills'>
        <button className='heroButton'>Skills</button>
        </Link>
        <Link href='#projects'>
        <button className='heroButton'>Projects</button>
        </Link>
      </div>
      </div>
    </div>
  )
}

Page.tsx 

'use client'
import About from "@/components/About";
import Experience from "@/components/Experience";
import Header from "@/components/Header";
import Hero from "@/components/Hero";

export default function Home() {
  return (
    < div className='bg-[rgb(55,64,104)] text-white h-screen snap-y snap-mandatory 
    overflow-scroll z-0' >
<Header/>

<section id='hero' className='snap-center'>
<Hero/>
</section>

<section id='about' className='snap-center'>
<About/>
</section>

{/*experience */}
<section id='experience' className="snap-center">
  <Experience/>
</section>

{/*skills*/}

{/*projects */}

{/*Contact Me */}

</div>
  )
}

我试着按照文档和检查我的控制台没有错误。尝试了下一个链接，但没有工作，更改了路径，使它们为/而不是#