单击链接后如何关闭模式窗口

Question

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

\n

我认为问题在于，当应用程序更新到新页面时，它不会重新安装导航组件，因此导航组件保持“打开”状态。

\n

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

\n

Answer 1

您是对的 - 使用 Next/router 的内部应用程序页面导航不会执行完整的页面刷新，因此它不会卸载模式。

您可以使用useRouter挂钩Next.js 路由事件。它将使您能够检测路线更改并调用关闭函数。

您可以使用 ; 关闭下一页安装上的模式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
  }
}