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