[Next.js] URLが変わった時に検知する方法(クライアントコンポーネント)

Next.js
投稿日:
カテゴリー Next.js/React

Next.jsのクライアントコンポーネントでURLが変わった時に検知する方法についてのメモです。初心者のメモなので参考程度にしてください。

広告

ソースコード

'use client'

import React, { useEffect, useRef, useState } from "react"
import { usePathname } from "next/navigation"

export const MyComponent = () => {
    const pathname = usePathname()
    const pathnameRef = useRef<string>('')

    useEffect(() => {
        console.log('pathname', pathname)
        if (pathnameRef.current !== '' &&
            pathname !== pathnameRef.current) {
            console.log('URLが変わりました。')
        }
        pathnameRef.current = pathname
    }, [pathname])

    // ...
}

この方法で、ハンバーガーメニューの中のリンクをクリックした時に、ハンバーガーメニューを閉じています（ハンバーガーメニューの中身は子コンポーネントのサーバーコンポーネントなのでonClickを使えない）。もっと良い方法があるかもしれませんが、とりあえずこれで凌いでいます。

広告