英文:
Link component is not working Next js v 13.4
问题
以下是您要翻译的代码部分：
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>
)
}
'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>
)
}
希望这能帮助您解决问题。如果您需要进一步的帮助，请随时告诉我。
英文:
When I click on the buttons About, Experience and so forth. It is not directing me to the page but if I type the endpoint for that page it works so http://localhost:3000/#about so why is my button not taking me there when the section exists. HERE is the code.
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>
)
}
I tried following the docs and checking my console with no errors there. Attempted the Next link that didnt work , changed the paths so that they are / instead of #
答案1
得分: 1
你应该使用原生的HTML锚点，像这样：
<a href="#about">Text</a>
记住，next/link 只在 Next.js 页面之间进行路由时才需要使用。
英文:
You should use native HTML anchor like that:
<a href="#about">Text</a>
Remember, next/link is only needed for routing between Next.js pages.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论