Next.jsのページ遷移
<Link>
code:pages/index.tsx
import Link from 'next/link'
export default function Page() {
return (
<Link href="/other">
<a>Other</a>
</Link>
)
}
code:pages/other.tsx
import Link from 'next/link'
export default function Other() {
return (
<Link href="/other">
<a>Home</a>
</Link>
)
}
router.push
戻るボタンで戻れる(historyスタックに追加する)
router.replace
戻るボタンで戻れない(historyスタックに追加しない)
code:tsx
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<>
<button onClick={() => router.push('/')}>
router.push('/')
</button>
<button onClick={() => router.replace('/')}>
router.replace('/')
</button>
</>
)
}
そのほか、使えそうなやつ
router.prefetch
prefetchして、ページ遷移を早くできる
prefetchするurlを指定する
router.back
戻る処理
router.reload
リロード