Nextjs client 使用 useRouter push 或者 replace 时，显示一个 loading 状态给用户。可以通过使用 useTransition 来实现。
代码如下：
import { useRouter } from 'next/navigation'
import { useTransition } from 'react'
'use client'
export function MyComponent() {
const router = useRouter()
const [isPending, startTransition] = useTransition()
function navigate() {
startTransition(() => {
router.push('/sometwhere')
})
}
return (
<div>
<button type="button" onClick={navigate}>Click</button>
{isPending && <p>Navigating...</p>}
</div>
)
}
没有评论