拦截路由无法匹配静态路由的问题排查求助

我尝试在[draftVersion]页面的并行路由@modal中拦截根路由的/form路径，项目的文件夹结构如下：

app
├── error.tsx
├── layout.tsx
├── page.tsx
├── [draftVersion]
│   ├── page.tsx
│   ├── layout.tsx
│   └── @modal
│       ├── page.tsx
│       ├── default.tsx
│       ├── [...catchAll]
│       │   └── page.tsx
│       └── (...)form
│           ├── create
│           │   └── page.tsx
│           └── [draftVer]
│               ├── import
│               │   └── page.tsx
│               └── row
│                   └── page.tsx
└── form
    ├── create
    │   └── page.tsx
    └── [draftVer]
        ├── import
        │   └── page.tsx
        └── row
            └── page.tsx

当前问题：

• form/[draftVer]/import和form/[draftVer]/row可以被@modal/(...)form/[draftVer]/import和@modal/(...)form/[draftVer]/row成功拦截
• 访问/form/create时，会被@modal/[...catchAll]兜底路由拦截
• 移除@modal/[...catchAll]后，/form/create没有匹配到任何拦截路由，直接跳转到根路由的/form/create页面
• 已尝试删除.next目录并清除浏览器缓存，问题未解决

解决方案 #

问题出在并行路由的分支匹配顺序上。Next.js在处理并行路由的多个分支时，会按照目录名称的ASCII码顺序进行匹配：

• [...catchAll]的目录名称以[开头（ASCII码91）
• (...)form的目录名称以(开头（ASCII码40）

由于[的ASCII码大于(，[...catchAll]会被优先处理，而它作为兜底路由会匹配所有未被明确匹配的路径，导致/form/create被它拦截，无法走到(...)form/create的匹配逻辑。

解决方法：

1. 将@modal下的[...catchAll]文件夹重命名为字母顺序靠后的名称，比如__[...catchAll]或zzz[...catchAll]
2. 确保(...)form目录在排序上优先于兜底路由目录

操作后删除.next目录并重启开发服务器，/form/create会被正确匹配到@modal/(...)form/create/page.tsx，只有当路径不匹配(...)form下的任何路由时，才会触发兜底路由。

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