Next.js 13中URL哈希监听失效问题求助

在Next.js 13 App Router中可以监听URL哈希变化，但原生hashchange事件在使用Link组件进行客户端导航时可能无法可靠触发——这是因为Next.js可能通过history.pushState更新哈希，而该方法不会触发原生hashchange事件。

问题排查与解决方案 #

你的代码中，首次渲染时hashchange事件能生效是因为页面加载时哈希变化会触发该事件，但后续通过Link切换哈希时，Next.js的客户端路由机制不会触发原生事件，导致监听器无响应。

修改方案1：补充哈希变化的主动检查

在组件渲染时主动对比当前哈希与上一次的哈希值，覆盖Next.js客户端导航的场景：

'use client'

import route from '@/config/routing'
import { Component1 } from '@/components/other_components/Component1'
import { Component2 } from '@/components/other_components/Component2'
import { Barlow } from 'next/font/google'
import { useEffect, useState, useRef } from 'react'

const barlow = Barlow({ subsets: ['latin'], weight: '900' })

export default function Home() {
    // 改用存储组件key的方式，比直接存JSX更高效
    const [activeComponent, setActiveComponent] = useState('component1')
    const previousHash = useRef(window.location.hash)

    const componentSwitcher = () => {
        const hash = window.location.hash
        console.log(hash)
        switch (hash) {
            case '#component1':
                setActiveComponent('component1')
                break
            case '#component2':
                setActiveComponent('component2')
                break
            default:
                setActiveComponent('component1')
                break
        }
    }

    // 监听原生hashchange事件（处理浏览器前进/后退）
    useEffect(() => {
        const handleHashChange = () => {
            componentSwitcher()
        }

        window.addEventListener('hashchange', handleHashChange)
        componentSwitcher() // 初始化执行一次

        return () => {
            window.removeEventListener('hashchange', handleHashChange)
        }
    }, [])

    // 每次渲染时检查哈希变化（处理Next.js客户端导航）
    useEffect(() => {
        const currentHash = window.location.hash
        if (currentHash !== previousHash.current) {
            previousHash.current = currentHash
            componentSwitcher()
        }
    })

    return (
        <>
            <div className="container">
                <div className="main__wrapper">
                    <p className={`${barlow.className} welcome__text`}>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta placeat necessitatibus animi quam, ipsum minima possimus enim cumque nesciunt distinctio.
                    </p>
                </div>
            </div>
            {/* 根据key渲染对应组件 */}
            {activeComponent === 'component1' ? <Component1 /> : <Component2 />}
        </>
    )
}

修改方案2：使用Next.js Router的路由变化监听（App Router适配）

在Next.js 13.4+版本中，可通过router.subscribe监听路由状态变化，间接检测哈希更新：

'use client'

import { useRouter } from 'next/navigation'
import route from '@/config/routing'
import { Component1 } from '@/components/other_components/Component1'
import { Component2 } from '@/components/other_components/Component2'
import { Barlow } from 'next/font/google'
import { useEffect, useState } from 'react'

const barlow = Barlow({ subsets: ['latin'], weight: '900' })

export default function Home() {
    const router = useRouter()
    const [activeComponent, setActiveComponent] = useState('component1')

    const componentSwitcher = () => {
        const hash = window.location.hash
        console.log(hash)
        switch (hash) {
            case '#component1':
                setActiveComponent('component1')
                break
            case '#component2':
                setActiveComponent('component2')
                break
            default:
                setActiveComponent('component1')
                break
        }
    }

    useEffect(() => {
        // 监听路由状态变化
        const unsubscribe = router.subscribe((state) => {
            if (state.type === 'POP' || state.type === 'PUSH') {
                componentSwitcher()
            }
        })

        window.addEventListener('hashchange', componentSwitcher)
        componentSwitcher()

        return () => {
            unsubscribe()
            window.removeEventListener('hashchange', componentSwitcher)
        }
    }, [])

    return (
        <>
            <div className="container">
                <div className="main__wrapper">
                    <p className={`${barlow.className} welcome__text`}>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta placeat necessitatibus animi quam, ipsum minima possimus enim cumque nesciunt distinctio.
                    </p>
                </div>
            </div>
            {activeComponent === 'component1' ? <Component1 /> : <Component2 />}
        </>
    )
}

额外优化点 #

• 避免直接将JSX元素存入状态，改用字符串key或枚举值，减少不必要的组件重新渲染。
• 确保route.modules中的href值为正确的哈希格式（如#component1），无需添加域名或路径前缀。

内容的提问来源于stack exchange，提问作者ais