Cannot have <Link> without href - cannot use for onClick or disable dynamically, as you can with <a>

[dancherb]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.18.3

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next build

Describe the Bug

A failed prop type error is given when placing a <Link/> from "next/link" with a prop type that is not a string or object.

If trying to pass an empty object {} or string "" as href, odd behaviour occurs. The target URL (and preview URL) in the corner becomes the component name of the page as found in pages, e.g. domain.com/CommentsScreenComponent, instead of the actual URL as set up in routing that the user is currently on (e.g. domain.com/item/5/comments). This breaks the app and is particularly undesirable when component names as found in pages are supposed to be hidden.

Expected Behavior

I would like to use custom button and link components to handle actions, whether they are href's or onClick events. I would like to disable the target of <Link/> tags at times - for example, so you can only proceed with a Link after filling a form. This is similar to how <a> tags and react-router's <Link> tags work - the app does not break when a href is blank or disabled, or when a button has an onClick event instead.

Instead, I am having to dynamically swap out which components I use - and even set up outer wrapping components - depending on whether a button is a href or an onClick, and is disabled or not. This is all just to make next's Link component happy.

Also - <Link/> messes around when the href given is external e.g. "https://google.com" (see #22733), requiring more dynamic swapping around.

To Reproduce

<Link href={disabled ? undefined : "/next"}>Dynamically disable-able button</Link>

<Link onClick={() => console.log("next")}>onClick button</Link>

<Link><a>The link is still wrapping this anchor tag, even though it's not doing anything right now - this can be helpful too for dynamic apps</a></Link>