Nextjsで遷移を中断するには
nextjsのRouterにおいて、現時点では遷移に対して割り込む正式な手段は用意されていないが、特定イベント内でエラーをemitしてthrowすることによって中断させることができる。 sentryよくわかってないけど使ってるなら例外のやつがいりそう
This package is still very experimental and should not be used at this point
これ出たらうちの外向きアプリにもSentry入れるかという感じ
ユースケース
フォームの離脱前に警告を出したい場合
やらなきゃいけないこと
コンポーネントのマウント時にwindowに対してbeforeunloadをひっかける
タブ閉じ確認
useEffect => []で仕掛ける、returnでremoveを忘れずに
code:beforeunload.ts
useEffect(() => {
const handleWindowClose = (e: any) => {
e.preventDefault()
e.returnValue = "編集中の内容は破棄されます。移動してよろしいですか?" // Chromeは無視する
}
window.addEventListener("beforeunload", handleWindowClose)
return () => {
window.removeEventListener("beforeunload", handleWindowClose)
}
}, [])
next/routerにrouteChangeStartでひっかける
ページ遷移確認
中断の場合はrouteChangeErrorをemitして何かしらをthrow
useEffect => []で仕掛ける、returnでremoveを忘れずに・ツー
code:nextrouter.ts
const isMoveConfirmed = useRef(false) // すぐ下で使います
useEffect(() => {
const routeChangeStart = () => {
if (isMoveConfirmed.current === true) return // 正しい遷移の場合はこれで回避、破棄されない(はず)ので
if (
confirm("編集中の内容は破棄されます。移動してよろしいですか?") !== true
) {
Router.events.emit("routeChangeError")
throw aborted
}
}
Router.events.on("routeChangeStart", routeChangeStart)
return () => {
Router.events.off("routeChangeStart", routeChangeStart)
}
}, [])
まとめ
routeChangeStart、throwなんで普通にコンソールにエラー記録されちゃう、回避策あったら教えてください
見つけたら直します
参考