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>
  )
}