next.js - 单击链接后如何关闭模态窗口

Question

我的网站使用全屏弹出式导航。 (目前我正在使用 ReactModal，但我以前使用的自制模态组件也有同样的问题)。当用户使用 NextJS Link 组件单击导航中的链接时，弹出窗口不会自动关闭——他们必须手动关闭它才能显示新页面。我创建了一个 onClick 事件来关闭导航弹出窗口，但在导航关闭之后和下一页加载之前通常会有短暂的片刻让用户感到困惑。

我认为问题是当应用更新到新页面时，它没有重新挂载导航组件，因此导航组件保持“打开”状态。

有没有办法让它在下一页加载时关闭弹出窗口？或者也许有一个我没有想到的更优雅的解决方案。

Answer 1

你是对的 - 使用 Next/router 的内部应用页面导航不会进行完整的页面刷新，因此它不会卸载模态。

你可以 Hook 到Next.js route events与 useRouter .它将使您能够检测到路线更改并调用您的关闭功能。

您可以使用 routeChangeComplete 在下一页挂载时关闭模式；但是，如果您在关闭模式之前等待下一页加载，则该应用程序可能会显得滞后。

响应速度更快且用户体验可能更好的方法是在用户或系统请求使用 routeChangeStart 转到新页面后立即关闭模式。

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const ModalOrPage = ()=>{
   const { events } = useRouter();

   const close = ()=> {
     //call modal close here or place inline in the events
   }

   useEffect(() => {
    // subscribe to next/router event
    events.on('routeChangeStart', close);
    return () => {
      // unsubscribe to event on unmount to prevent memory leak
      events.off('routeChangeStart', close); 
    };
  }, [close, events]);
  
  return {
   // your modal or page
  }
}