Next.js中能否在/pages目录而非/app目录使用拦截路由？

首先明确：拦截路由是Next.js App Router（/app目录）独有的特性，Pages Router（/pages目录）没有原生支持这个功能，你按App Router的目录结构配置自然不会生效，调用router.push('/photo/'+id)只会跳转到普通页面。

如果你不想迁移到App Router，可以手动实现类似需求，具体步骤如下：

1. 跳转时携带查询参数
   调用router.push时添加查询参数标记模态框状态：

   router.push(
     { pathname: `/photo/${id}`, query: { showModal: 'true' } },
     `/photo/${id}` // 保持URL美观，不显示查询参数
   )
   

2. 在目标页面处理模态框渲染
   在pages/photo/[id].tsx中，读取路由参数并控制模态框显示：

   import { useRouter } from 'next/router';
   import { useEffect, useState } from 'react';
   
   export default function PhotoPage() {
     const router = useRouter();
     const [showModal, setShowModal] = useState(false);
   
     useEffect(() => {
       // 页面加载或路由变化时，判断是否需要显示模态框
       if (router.query.showModal === 'true') {
         setShowModal(true);
       } else {
         setShowModal(false);
       }
     }, [router.query]);
   
     // 关闭模态框时更新路由，移除查询参数
     const handleCloseModal = () => {
       router.push(`/photo/${router.query.id}`, undefined, { shallow: true });
       setShowModal(false);
     };
   
     return (
       <>
         {/* 普通页面内容 */}
         {!showModal && <div>照片页面的正常内容</div>}
         {/* 模态框组件 */}
         {showModal && (
           <div className="modal-overlay">
             <div className="modal-content">
               <button onClick={handleCloseModal}>关闭</button>
               {/* 模态框内容 */}
             </div>
           </div>
         )}
       </>
     );
   }
   

3. 处理刷新场景
   页面刷新时，router.query会保留showModal参数，上面的useEffect会自动触发并显示模态框，实现刷新后全屏显示模态框的需求。

如果你的项目长期维护，建议考虑迁移到App Router，原生拦截路由的实现会更简洁、符合官方规范，避免手动维护路由状态的繁琐。

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