Next.js 13中如何用Link组件从拦截路由导航离开？

核心原因 #

这不是Next.js的Bug，而是你对并行路由的默认行为理解有偏差：并行路由（比如你用到的@modal）在路由切换时，如果没有找到匹配的路由分支，会保留上一次渲染的内容，而非自动清空。

router.back()之所以能正常关闭模态，是因为它回退到了未触发拦截路由的历史状态（/），此时Next.js会重新评估@modal的匹配规则，发现没有对应分支，因此会自动移除模态组件；而router.push('/')是新增一条历史记录，此时Next.js会保留@modal之前渲染的模态内容，除非你提供了默认分支来覆盖。

解决方案 #

只需两步即可解决：

1. 添加并行路由的默认分支
   在app/@modal目录下创建default.js，返回空内容：

export default function DefaultModal() {
  return null;
}

这样，当路由切换到非/photos/[id]的地址时，@modal会渲染这个空组件，模态自然消失。

2. 确认拦截路由结构正确
   你的拦截路由结构app/@modal/(..)photos/[id]/page.js是正确的，(..)表示向上跳转两级路由，能正确匹配/photos/[id]的URL，触发模态渲染。

对文档描述的补充 #

文档中提到的“用Link组件关闭模态”，前提是你配置了并行路由的默认分支。没有default.js时，Link导航只会改变URL，但并行路由会保留之前的模态内容，这就是你觉得违反直觉的原因。

关于[...catchAll]路由的误区 #

你之前尝试的[...catchAll]路由没用，是因为它会匹配所有路由，反而会让@modal一直渲染对应内容。正确的做法是用default.js作为兜底，仅在无匹配分支时渲染空内容。

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