如果您使用的是功能性React组件，则可以执行以下操作：

const router = useRouter();

useEffect(() => {
  if (isMenuOpen) {
    setMenuOpen(!isMenuOpen);
  }
}, [router.asPath]);

看看https://github.com/zeit/next.js/#router-events，在Header组件的ctor中应该可以看到类似这样的内容：

constructor(props){
  super(props);

  Router.events.on('routeChangeComplete', (url) => {
    props.toggle();
  });
}

我们可以使用路由器事件来处理这个问题。https://nextjs.org/docs/api-reference/next/router#usage-6

const router = useRouter();
useEffect(() => {
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange)
  };
}, [router.events]);

完整示例

使用功能组件。
在routeChangeStart上触发，因此可以选择在单击后立即设置菜单动画。

import { useRouter } from 'next/router';

const Menu = () => {
  const router = useRouter();
  const [show, setShow] = useState(false);

  const hide = useCallback(() => {
    setShow(false);
  }, [setShow]);

  useEffect(() => {
    // subscribe
    router.events.on('routeChangeStart', hide);
    
    // unsubscribe
    return () => router.events.off('routeChangeStart', hide);
  }, [hide, router.events]);

  return show ? <div>menu</div> : null
}

管理嵌套（类型脚本）

我需要这样的东西在顶层，虽然我会分享：
x一个一个一个一个x一个一个二个x

当路由改变发生时，next.js试图加载另一个页面。2处理路由改变的一个更好的方法是，如果你正在跟踪加载状态，保持加载状态为真，直到路由改变完成。

const router = useRouter();

 useEffect(() => {
    const handleComplete = () => {
      setIsLoading(false);
    };
    router.events.on("routeChangeComplete", handleComplete);
    router.events.on("routeChangeError", handleComplete);

    return () => {
      router.events.off("routeChangeComplete", handleComplete);
      router.events.off("routeChangeError", handleComplete);
    };
  }, [router]);

Reference: https://nextjs.org/docs/api-reference/next/router
在那里你可以看到类组件的基本代码。但是在这里我使用函数组件来解决这个问题。

useEffect(() => {
    const handleRouteChange = () => {
        setOpenDropdown(false)
    }
    router.events.on('routeChangeStart', handleRouteChange)
}, [])

我相信你需要绑定你的回调函数。你可能还需要添加一个构造函数。下面是一个接受文件上传的项目的代码片段。

class Files extends React.Component {
        // define your constructor and call super before setting state vars
        constructor(props){
            super(props);
            this.state = {
                uploadStatus: false
            }
            // Bind your callback
            this.handleUploadImage = this.handleUploadImage.bind(this);
            // set other initial vars if needed
        }

        handleUploadImage(files){
            // do stuff with the files
        }

        render () {
            return (
                <div id="fileContainer">
                    <MyDropzone id={this.props.project._id} onDrop={this.handleUploadImage}>
                        {({getRootProps}) => <div {...getRootProps()} />}
                    </MyDropzone>
                </div>
            )
        }
    }