fix(#37981): handle legacy link behavior with number type children (#…

…38013)

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

Fixes #37981.

When handling the legacy link behavior on the current version of Next.js, it only wraps single string child in `<a>` tag. The PR fixes the issue by also wrap single number child in `<a>` tag, too.

packages/next/client/link.tsx

@@ -275,7 +275,10 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
 
  children = childrenProp
 
- if (legacyBehavior && typeof children === 'string') {
+ if (
+ legacyBehavior &&
+ (typeof children === 'string' || typeof children === 'number')
+ ) {
  children = <a>{children}</a>
  }
 

test/integration/client-navigation/pages/link-number-child.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default function Page() {
+ return (
+ <div>
+ Hello World. <Link href="/about">{1000}</Link>
+ </div>
+ )
+}

test/integration/client-navigation/test/index.test.js

@@ -68,6 +68,12 @@ describe('Client Navigation', () => {
  )
  })
 
+ it('should not throw error when one number type child is provided', async () => {
+ const browser = await webdriver(context.appPort, '/link-number-child')
+ expect(await hasRedbox(browser)).toBe(false)
+ if (browser) await browser.close()
+ })
+
  it('should navigate back after reload', async () => {
  const browser = await webdriver(context.appPort, '/nav')
  await browser.elementByCss('#about-link').click()