页面上没有 HTML 链接
防止使用
<a>
元素导航到内部 Next.js 页面。
为什么会出现此错误
使用了 <a>
元素导航到页面路由,但没有使用 next/link
组件,导致了不必要的完整页面刷新。
需要 Link
组件来启用页面之间的客户端路由转换,并提供单页应用体验。
可能的修复方法
确保导入 Link
组件,并包装路由到不同页面路由的锚元素。
之前
pages/index.js
function Home() {
return (
<div>
<a href="/about">About Us</a>
</div>
)
}
之后
pages/index.js
import Link from 'next/link'
function Home() {
return (
<div>
<Link href="/about">About Us</Link>
</div>
)
}
export default Home
选项
pagesDir
此规则通常可以自动定位您的 pages
目录。
如果您在 monorepo 中工作,我们建议在 eslint-plugin-next
中配置 rootDir
设置,pagesDir
将使用该设置来定位您的 pages
目录。
在某些情况下,您可能还需要通过提供 pages
目录来直接配置此规则。这可以是路径或路径数组。
eslint.config.json
{
"rules": {
"@next/next/no-html-link-for-pages": ["error", "packages/my-app/pages/"]
}
}
实用链接
这有帮助吗?