Closed2021/07/28にクローズ1

NextjsでbeforePopStateを使いたい

Next.js

React

Question

router

Knob/のまど先生

使い方

ページ遷移する前になにかアクションをはさみたいときに使える？

import { useRouter } from 'next/router'
const router = useRouter()
React.useEffect(() => {
    router.beforePopState(({ url, as, options }) => {
		// ここはrouterイベントが発生したときに発火する
      if (as !== '/') {
        // asに次に飛ぼうとしているpathが入るのでそれで条件分岐
        window.location.href = as
        return false
      }
			// この関数の戻り値がfalseだと遷移がキャンセルされる
      return true
    })
  }, [])

こんな感じなのですが,仕様の把握がすごく難しかったです.

現状としてわかっていることを整理

router.beforePopState()イベントの発火は,戻ると進むのときのみ（router.push('/')などでは確認できなかった.）
urlは実際のlocation.pathnameをとってくる,asはコード上のpathをとってくる

例：{ url: '/blog/123', 'as: /blog/[id]' }
アプリ外への遷移に関しても,router.beforePopState()イベントは発火しない.

やりたいこと

戻るをしたときにアプリ外だった場合にアプリのホーム画面などに誘導したい

現状は,router.beforePopState()は使わず,アプリ上の戻るボタンにだけ以下の関数を使っている.

import { useRouter } from 'next/router'
const router = useRouter()
const pageBack = () => {
  const currentPath = router.pathname
  if (!document.referrer) {
    router.push('/')
  } else {
    router.back()
  }
}

import { useRouter } from 'next/router'
const router = useRouter()
React.useEffect(() => {
    router.beforePopState(({ url, as, options }) => {
		// ここはrouterイベントが発生したときに発火する
      if (!as) {
        router.push('/')
        return false
      }
			return true
    })
  }, [])

とかできるとうれしいのだけれど...

思ったこと

戻ると進むのときのみしか使えないのであれば,使う場面はかなり少なそう

【参考文献・参考記事など】

next/router | Next.js

このスクラップは2021/07/28にクローズされました