Throw error <a> child in <Link> (#41756)
This PR improves the error message when `<a>` is a child of `<Link>`
This commit is contained in:
parent
a5d674237a
commit
e107bc4561
7 changed files with 102 additions and 0 deletions
21
errors/invalid-new-link-with-extra-anchor.md
Normal file
21
errors/invalid-new-link-with-extra-anchor.md
Normal file
|
@ -0,0 +1,21 @@
|
|||
# Invalid <Link> with <a> child
|
||||
|
||||
#### Why This Error Occurred
|
||||
|
||||
Starting with Next.js 13, `<Link>` renders as `<a>`, so attempting to use `<a>` as a child is invalid.
|
||||
|
||||
#### Possible Ways to Fix It
|
||||
|
||||
Run the `new-link` codemod to automatically upgrade previous versions of Next.js to the new `<Link>` usage:
|
||||
|
||||
```sh
|
||||
npx @next/codemod new-link .
|
||||
```
|
||||
|
||||
This will change `<Link><a id="link">Home<a></Link>` to `<Link id="link">Home</Link>`.
|
||||
|
||||
Alternatively, you can add the `legacyBehavior` prop `<Link legacyBehavior><a id="link">Home<a></Link>`.
|
||||
|
||||
### Useful Links
|
||||
|
||||
- [next/link](https://nextjs.org/docs/api-reference/next/link)
|
|
@ -694,6 +694,10 @@
|
|||
"title": "nested-styled-jsx-tags",
|
||||
"path": "/errors/nested-styled-jsx-tags.md"
|
||||
},
|
||||
{
|
||||
"title": "invalid-new-link-with-extra-anchor",
|
||||
"path": "/errors/invalid-new-link-with-extra-anchor.md"
|
||||
},
|
||||
{
|
||||
"title": "returning-response-body-in-middleware",
|
||||
"path": "/errors/returning-response-body-in-middleware.md"
|
||||
|
|
|
@ -408,6 +408,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
|
|||
} else {
|
||||
child = React.Children.only(children)
|
||||
}
|
||||
} else {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if ((children as any)?.type === 'a') {
|
||||
throw new Error(
|
||||
'Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.\nLearn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const childRef: any = legacyBehavior
|
||||
|
|
42
test/e2e/new-link-behavior/child-a-tag-error.test.ts
Normal file
42
test/e2e/new-link-behavior/child-a-tag-error.test.ts
Normal file
|
@ -0,0 +1,42 @@
|
|||
import { createNext, FileRef } from 'e2e-utils'
|
||||
import { getRedboxSource, hasRedbox } from 'next-test-utils'
|
||||
import { NextInstance } from 'test/lib/next-modes/base'
|
||||
import webdriver from 'next-webdriver'
|
||||
import path from 'path'
|
||||
|
||||
const appDir = path.join(__dirname, 'child-a-tag-error')
|
||||
|
||||
describe('New Link Behavior with <a> child', () => {
|
||||
let next: NextInstance
|
||||
|
||||
beforeAll(async () => {
|
||||
next = await createNext({
|
||||
files: {
|
||||
pages: new FileRef(path.join(appDir, 'pages')),
|
||||
'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
|
||||
},
|
||||
dependencies: {
|
||||
next: 'latest',
|
||||
react: 'latest',
|
||||
'react-dom': 'latest',
|
||||
},
|
||||
})
|
||||
})
|
||||
afterAll(() => next.destroy())
|
||||
|
||||
it('should throw error with <a> child', async () => {
|
||||
const browser = await webdriver(next.url, `/`)
|
||||
const link = await browser.elementsByCss('a[href="/about"]')
|
||||
const msg =
|
||||
'Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>'
|
||||
|
||||
if ((global as any).isDev) {
|
||||
expect(next.cliOutput).toContain(msg)
|
||||
expect(await hasRedbox(browser, true)).toBe(true)
|
||||
expect(await getRedboxSource(browser)).toContain(msg)
|
||||
expect(link).not.toBeDefined()
|
||||
} else {
|
||||
expect(link).toBeDefined()
|
||||
}
|
||||
})
|
||||
})
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
12
test/e2e/new-link-behavior/child-a-tag-error/pages/about.js
Normal file
12
test/e2e/new-link-behavior/child-a-tag-error/pages/about.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<h1>About Page</h1>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>
|
||||
</>
|
||||
)
|
||||
}
|
12
test/e2e/new-link-behavior/child-a-tag-error/pages/index.js
Normal file
12
test/e2e/new-link-behavior/child-a-tag-error/pages/index.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<h1>Home Page</h1>
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</>
|
||||
)
|
||||
}
|
Loading…
Reference in a new issue