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

【问题标题】：How to close modal window after clicking a link单击链接后如何关闭模式窗口
【发布时间】：2022-06-30 17:50:15
【问题描述】：

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

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

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

【问题讨论】：

标签： next.js

【解决方案1】：

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

您可以使用useRouter 连接到Next.js route events。它将使您能够检测路线更改并调用您的关闭函数。

您可以使用routeChangeComplete关闭下一页mount上的模态；但是，如果您在关闭模式之前等待加载下一页，应用程序可能会出现延迟。

在用户或系统请求使用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
  }
}

【讨论】：

非常感谢。

【解决方案2】：

问题是您在 _app 中添加了模态组件，因此它存在于您应用的所有页面中。

一种解决方案是将当前路径作为键传递给模态框，这样模态框将在路径更改时重新安装，并且每次导航时都会重置内部状态。

// inside _app.jsx
const router = useRouter()

return <Modal key={router.asPath} />

【讨论】：