在App Router中添加@flashSection模块后无法访问/some/1路由的问题

原因分析 #

1. 路由匹配优先级冲突：Next.js App Router的路由匹配按文件系统结构的深度和特异性排序。如果@flashSection文件夹内存在和/some/1匹配度更高的路由规则（比如捕获所有路由的[[...slug]]页面，或者和some/[id]完全重合的路由结构），会优先匹配@flashSection下的路由，导致原/some/1无法访问。
2. 并行路由误识别：@开头的文件夹是Next.js并行路由的命名插槽（比如@sidebar），如果你的@flashSection是普通功能模块却用了@开头，Next.js会自动将其识别为并行路由插槽，可能干扰主路由的匹配逻辑，尤其是当它和some文件夹处于同一层级或嵌套层级时。
3. 路由结构重叠：如果@flashSection内部的路由路径和/some/1完全重合，Next.js会优先加载优先级更高的路由组件，导致原路由无法正常访问。

解决方法 #

• 调整文件夹命名：如果@flashSection是普通功能模块，直接去掉开头的@，改成flashSection，避免Next.js将其识别为并行路由插槽，即可和/some/[id]路由共存。
• 修正并行路由用法：如果@flashSection是作为并行路由使用的，确保它处于需要并行渲染的路由层级（比如根目录下），并在对应页面中通过<Slot name="flashSection" />渲染它，不要让它的路由结构和/some/[id]重叠。
• 用路由组隔离：把其中一个路由结构放在路由组（用()包裹的文件夹）里，示例结构如下：

  app/
  ├── (main)/
  │   └── some/
  │       └── [id]/
  │           └── page.js
  └── @flashSection/
      └── ...
  

  路由组的文件夹不会影响路由路径，能有效隔离两个路由结构，避免冲突。
• 清理冗余路由规则：检查@flashSection内部是否有捕获所有路由的[[...slug]]规则，如果有，要么删除该规则，要么将其移到更深的层级，让/some/[id]这种更具体的路由优先匹配。

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