Agile育成ブログ
未来を変える喜びを
未分類

useRouter

router.push

クライアント側の遷移処理をおこないます。

基本的な書き方は、router.push(url, as, options);です。

router.back

履歴を1つ戻します。(ブラウザバック、戻るボタンクリックと同じ挙動)
window.history.back()と同様。

router.back

リロード(更新)します。
window.location.reload()と同様。

useRouterとRouterの違い

import { useRouter } from 'next/router'

const router = useRouter()

router.push("/")
import Router from 'next/router'

Router.push("/")

明確な違いは、 useRouter がフックであり、 Router がただのグローバルな変数にすぎないという点です。
すなわち useRouter を参照しているコンポーネントは、ページのパスが変わるたびに再描画されます。
それに対して、 Router を参照しているコンポーネントは、ページパスが変化してもコンポーネントが再描画されることはありません。