5c6c385100
The paths starting with slashes in the ESLint config examples are absolute, which are almost never the correct configuration for a project. Using a relative path is a much more common configuration, and leads to much less debugging why these examples don't work. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`
1.4 KiB
1.4 KiB
No HTML link for pages
Why This Error Occurred
An HTML anchor element, <a>
, was used to navigate to a page route without using the Link
component.
The Link
component is required in order to enable client-side route transitions between pages and provide a single-page app experience.
Possible Ways to Fix It
Make sure to import the Link
component and wrap anchor elements that route to different page routes.
Before:
function Home() {
return (
<div>
<a href="/about">About Us</a>
</div>
)
}
After:
import Link from 'next/link'
function Home() {
return (
<div>
<Link href="/about">
<a>About Us</a>
</Link>
</div>
)
}
export default Home
Options
pagesDir
This rule can normally locate your pages
directory automatically.
If you're working in a monorepo, we recommend configuring the rootDir
setting in eslint-plugin-next
, which pagesDir
will use to locate your pages
directory.
In some cases, you may also need to configure this rule directly by providing a pages
directory. This can be a path or an array of paths.
{
"rules": {
"@next/next/no-html-link-for-pages": ["error", "packages/my-app/pages/"]
}
}