Next JS中如何实现路由页面加载完成后再关闭模态框？

你的核心问题是点击模态框内的链接后，模态框先关闭导致用户看到旧页面，直到新页面加载完成。这里有两种实用的解决思路：

方案一：监听路由变化自动关闭模态框 #

利用Next.js的useRouter事件，只要路由开始跳转就关闭模态框，无需修改模态框内的Link逻辑，简单高效。

修改Navbar组件代码：

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import MenuModal from './MenuModal';

export default function Navbar() {
  const [menuIsOpen, setMenuIsOpen] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // 路由开始跳转时关闭模态框
    const closeMenuOnRouteChange = () => setMenuIsOpen(false);
    
    // 绑定路由事件
    router.events.on('routeChangeStart', closeMenuOnRouteChange);
    
    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      router.events.off('routeChangeStart', closeMenuOnRouteChange);
    };
  }, [router]);

  const toggleMenuModal = () => {
    setMenuIsOpen(prev => !prev);
  };
  
  return (      
    <>
      {/* 汉堡按钮，点击触发toggleMenuModal */}
      <button onClick={toggleMenuModal}>菜单</button>
      {menuIsOpen ? (
        <MenuModal closeMenuModal={toggleMenuModal} />
      ) : null}
    </>
  )
}

这样不管是点击模态框内的链接，还是其他路由跳转操作，只要路由开始切换，模态框就会关闭，用户不会看到旧页面的闪烁。

方案二：自定义链接点击逻辑，跳转完成后关闭模态框 #

如果需要更精准控制（比如只在点击模态框内的链接时关闭），可以把模态框的状态setter传递给MenuModal，在路由跳转完成后手动关闭。

首先修改Navbar，传递setMenuIsOpen给MenuModal：

{menuIsOpen ? (
  <MenuModal setMenuIsOpen={setMenuIsOpen} />
) : null}

然后修改MenuModal组件，用useRouter手动处理跳转：

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function MenuModal({ setMenuIsOpen }) {
  const router = useRouter();

  const handleLinkClick = async (e, href) => {
    e.preventDefault(); // 阻止Link默认跳转行为
    await router.push(href); // 等待路由跳转完成
    setMenuIsOpen(false); // 关闭模态框
  };

  return (
    <Link href="/about" passHref>
      <a onClick={(e) => handleLinkClick(e, '/about')}>ABOUT</a>
    </Link>
  );
}

这个方案保留了Next.js Link的预加载特性，同时确保在新页面加载完成后才关闭模态框。

思路补充 #

你最初想传递状态setter的思路是可行的，只是需要结合路由跳转的异步特性来处理。而监听路由事件的方案更通用，适合大多数场景，无需改动太多代码。

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