Next.js Intercepting Routes无法渲染Modal，仅URL变化问题求助

• 必须在根layout渲染平行路由槽
  根目录的layout.js里一定要显式渲染modal这个平行路由槽，不然弹窗组件没有挂载的位置。示例代码：

  export default function RootLayout({ children, modal }) {
    return (
      <html lang="zh-CN">
        <body>
          {children}
          {modal} {/* 这行绝对不能漏，@modal下的组件全靠它渲染 */}
        </body>
      </html>
    )
  }
  

  这是最容易忽略的核心配置，很多人只建了路由目录，忘了在布局里把槽渲染出来。

• 跳转链接必须加slot="modal"属性
  根页面里跳转到/user/someUUID的Link组件，必须指定slot参数，告诉Next.js要把这个路由渲染到@modal的槽里，而不是走普通页面跳转：

  <Link href="/user/someUUID" slot="modal">查看用户详情</Link>
  

  没加这个属性的话，只会改变URL，完全不会触发弹窗渲染逻辑。

• 核对路由目录的命名格式
  确保@modal/(.)user/[id]/page.js的结构完全正确：

  • @modal是平行路由槽名，必须以@开头
  • (.)user的括号是英文半角，不能用中文括号，这个写法用来拦截同层级的user路由
  • 层级不能错，(.)user必须直接放在@modal目录下，不能嵌套其他文件夹

• 确认Next.js版本达标
  拦截路由是Next.js 13.4及以上版本才稳定支持的功能，执行npm list next查看版本，如果低于13.4，升级到最新稳定版再测试。

• 清除缓存重启开发服务器
  有时候Next.js开发服务器会缓存旧的路由配置，修改路由结构后，直接重启npm run dev，或者删除.next目录再重启，避免缓存导致的配置不生效。

• 检查@modal下的page.js是否正确导出组件
  确保@modal/(.)user/[id]/page.js里的组件是正确导出的，比如：

  export default function UserModal({ params }) {
    alert('弹窗组件已加载') // 用这个测试组件是否被触发
    return <div>用户弹窗：{params.id}</div>
  }
  

  如果alert都不触发，说明组件根本没被渲染，回到前面的槽配置和Link属性检查。

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