如何解决链接标签只是改变网址,但不呈现页面
我正在尝试学习下一个js路由,遇到了一个错误。
每次我单击 Link 标签时,它都会将 url 从“localhost:3000”更改为“localhost:3000/sample” 但它不会在我的 sample.js 文件中显示“Hi”
import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
return (
<div>
<Link href={"/sample"} as={'/sample'} >
<a>CLICK ME</a>
</Link>
</div>
)
}
export default Lnkz
这是我的 sample.js 文件,仅显示“您好”。
export default function Sample() {
return (
<div>
<h1>hi</h1>
</div>
)
}
我的入口文件。
import '../styles/globals.css'
import Lnkz from './Lnkz'
function MyApp({ Component,pageProps }) {
return (
<div>
<Lnkz />
</div>
)
}
export default MyApp
注意:我已经尝试过这样做,但它也不起作用。
import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
return (
<div>
<Link href="/sample" as='/sample'>
<a>CLICK ME</a>
</Link>
</div>
)
}
export default Lnkz
这是我的目录
编辑:添加了我之前也尝试过的代码并添加了我的目录的屏幕截图。
解决方法
我认为在看到您的目录后,问题出在外壳上。如果您使用的是旧版本的 next.js,则仅包含“as”,更多关于 here。
试试这个或者把你的文件名改成sample.js(带小's')
<Link href={"/Sample"}>
<a>CLICK ME</a>
</Link>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。