Require component rendered as child of Link to pass event to onClick handler

packages/next/client/link.tsx

@@ -284,6 +284,13 @@ function Link(props: React.PropsWithChildren<LinkProps>) {
   } = {
     ref: setRef,
     onClick: (e: React.MouseEvent) => {
+      if (process.env.NODE_ENV !== 'production') {
+        if (!e) {
+          throw new Error(
+            `Component rendered inside next/link has to pass click event to "onClick" prop.`
+          )
+        }
+      }
       if (child.props && typeof child.props.onClick === 'function') {
         child.props.onClick(e)
       }

test/integration/client-navigation/pages/link-invalid-onclick.js

@@ -0,0 +1,35 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export default function Page(props) {
+  const [errorCount, setErrorCount] = useState(0)
+
+  function Button(props) {
+    return (
+      <a
+        id="custom-button"
+        href={props.href}
+        onClick={(e) => {
+          e.preventDefault()
+          try {
+            props.onClick()
+          } catch (err) {
+            setErrorCount(errorCount + 1)
+            console.error(err)
+          }
+        }}
+      >
+        {props.href}
+      </a>
+    )
+  }
+
+  return (
+    <>
+      <p id="errors">{errorCount}</p>
+      <Link href="/nav" passHref>
+        <Button />
+      </Link>
+    </>
+  )
+}

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

@@ -87,6 +87,13 @@ describe('Client Navigation', () => {
       expect(text).toMatch(/this is the about page/i)
     })
 
+    it('should error when calling onClick without event', async () => {
+      const browser = await webdriver(context.appPort, '/link-invalid-onclick')
+      expect(await browser.elementByCss('#errors').text()).toBe('0')
+      await browser.elementByCss('#custom-button').click()
+      expect(await browser.elementByCss('#errors').text()).toBe('1')
+    })
+
     it('should navigate via the client side', async () => {
       const browser = await webdriver(context.appPort, '/nav')