f225179378
Fixes #22733 Regardless of whether it's recommended that Link be used with external href values or not, they can be used and `onMouseEnter` being swallowed with an external href value is unexpected behavior. ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint`
79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export async function getServerSideProps({ query: { port } }) {
|
|
if (!port) {
|
|
throw new Error('port required')
|
|
}
|
|
return { props: { port } }
|
|
}
|
|
|
|
export default function Page({ port }) {
|
|
const router = useRouter()
|
|
const [hover, setHover] = React.useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Link href="https://vercel.com/">
|
|
<a id="absolute-link">https://vercel.com/</a>
|
|
</Link>
|
|
<br />
|
|
<button
|
|
id="router-push"
|
|
onClick={() => router.push('https://vercel.com/')}
|
|
>
|
|
push https://vercel.com/
|
|
</button>
|
|
<br />
|
|
<button
|
|
id="router-replace"
|
|
onClick={() => router.replace('https://vercel.com/')}
|
|
>
|
|
replace https://vercel.com/
|
|
</button>
|
|
<br />
|
|
<Link href={`http://localhost:${port}/nav/about`}>
|
|
<a id="absolute-local-link">http://localhost:{port}/nav/about</a>
|
|
</Link>
|
|
<br />
|
|
<Link
|
|
href={`http://localhost:${port}/dynamic/[slug]/route`}
|
|
as={`http://localhost:${port}/dynamic/hello/route`}
|
|
>
|
|
<a id="absolute-local-dynamic-link">
|
|
http://localhost:{port}/dynamic/hello/route
|
|
</a>
|
|
</Link>
|
|
<br />
|
|
<button
|
|
id="router-local-push"
|
|
onClick={() => router.push(`http://localhost:${port}/nav/about`)}
|
|
>
|
|
push http://localhost:{port}/nav/about
|
|
</button>
|
|
<br />
|
|
<button
|
|
id="router-local-replace"
|
|
onClick={() => router.replace(`http://localhost:${port}/nav/about`)}
|
|
>
|
|
replace http://localhost:{port}/nav/about
|
|
</button>
|
|
<br />
|
|
<Link href="mailto:idk@idk.com">
|
|
<a id="mailto-link">mailto:idk@idk.com</a>
|
|
</Link>
|
|
<br />
|
|
<Link href="https://vercel.com/">
|
|
<a
|
|
id="absolute-link-mouse-events"
|
|
data-hover={hover}
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => setHover(false)}
|
|
>
|
|
https://vercel.com/
|
|
</a>
|
|
</Link>
|
|
</>
|
|
)
|
|
}
|