Reactjs 如何在Next.js中监听路由器更改时更改状态？

我试图实现的是完全相同的打开和关闭菜单动画，同时改变路由器作为这个反应应用程序上，但使用下一个。js（这是几乎相同的代码）

这是我的应用程序，这是

我正试图遵循，但似乎没有更新

菜单打开的状态

import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { withRouter, useRouter } from 'next/router'
import { UpArrowCircle } from '@/components/SvgFiles'
import { openMenu, closeMenu } from '@/components/MenuAnimations'

const Header = ({ dimensions }) => {
  const [menuState, setMenuState] = useState({ menuOpened: false })
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      // console.log(`App is changing to ${url}`)
      setMenuState({ menuOpened: false })
    }

    if (menuState.menuOpened === true) {
      openMenu(dimensions.width)
    } else if (menuState.menuOpened === false) {
      closeMenu()
    }

    router.events.on('routeChangeStart', handleRouteChange)

    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
  })

   return (
    <header className="header">
      <div className="container">
        <div className="row v-center space-between">
          <div className="logo">
            <Link href="/">
              <a>AGENCY</a>
            </Link>
          </div>
          <div className="nav-toggle">
            <div
              onClick={() => setMenuState({ menuOpened: true })}
              className="hamburger-menu"
            >
              <span></span>
              <span></span>
            </div>
            <div
              className="hamburger-menu-close"
              onClick={() => setMenuState({ menuOpened: false })}
            >
              <UpArrowCircle />
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
export default withRouter(Header)

从“下一个/链接”导入链接
从“React”导入React，{useffect，useState}
从“下一个/路由器”导入{withRouter，useRouter}
从“@/components/SvgFiles”导入{UpArrowCircle}
从“@/components/MenuAnimations”导入{openMenu，closeMenu}
常量头=（{dimensions}）=>{
const[menuState，setMenuState]=useState（{menuOpened:false}）
const router=useRouter（）
useffect（（）=>{
常量HandlerRouteChange=（url）=>{
//log（`App正在更改为${url}`）
setMenuState（{menuOpened:false}）
}
if（menuState.menuOpened==true）{
openMenu（尺寸.宽度）
}else if（menuState.menuOpened==false）{
关闭菜单（）
}
路由器.events.on（'routeChangeStart'，HandlerRouteChange）
return（）=>{
router.events.off（'routeChangeStart'，handleRouteChange）
}
})
返回(
机构
setMenuState（{menuOpened:true}）}
className=“汉堡菜单”
>
setMenuState（{menuOpened:false}）
>
)
}
使用路由器导出默认值（标题）

欢迎任何帮助！
干杯
 我刚从Github签出了你的代码。所以问题是，状态改变有效，但据我所知，没有动画。此标题弹出菜单的内容来自何处？他们似乎不在档案里。嘿@Gh05d，谢谢你的时间！如果单击亨伯格菜单（）上的（打开和关闭），您将看到正在触发动画。但是，当你打开菜单并点击其中的任何链接时，路由器发生了变化，但没有调用动画。此标题的组件来自
Navigation.jsx
，动画来自
src/components
文件夹中的
MenuAnimations.jsx
。