f22f88fd73
In development or with an invalid href, `await router.prefetch()` would not resolve the promise. This PR ensures that `await router.prefetch()` always resolves, no matter if it succeeds or not. Fixes: https://github.com/vercel/next.js/issues/15436 Relevant discussion: https://github.com/vercel/next.js/discussions/15431#discussioncomment-41264
22 lines
569 B
JavaScript
22 lines
569 B
JavaScript
import { useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export default function RouterPrefetch() {
|
|
const router = useRouter()
|
|
const [visible, setVisible] = useState(false)
|
|
const handleClick = async () => {
|
|
await router.prefetch(
|
|
process.env.NODE_ENV === 'development' ? '/another-page' : 'vercel.com'
|
|
)
|
|
setVisible(true)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<button type="button" id="prefetch-button" onClick={handleClick}>
|
|
click
|
|
</button>
|
|
{visible && <div id="hidden-until-click">visible</div>}
|
|
</div>
|
|
)
|
|
}
|