React的并行路由中 如果 路由 不匹配 会渲染 layout 来包裹 default.js吗?

Question

Mode  Size Date Modified Name
d----    - 16 Dec 13:59   .
d----    - 16 Dec 14:05  ├──  @analytics
-a---  218 16 Dec 13:58  │   ├──  default.tsx
-a---  258 16 Dec 14:07  │   ├──  layout.tsx
-a---  215 16 Dec 13:57  │   └──  page.tsx
d----    - 16 Dec 14:00  ├──  @team
-a---  257 16 Dec 14:01  │   ├──  layout.tsx
-a---  211 16 Dec 13:54  │   ├──  page.tsx
d----    - 16 Dec 13:57  │   └──  settings
-a---  219 16 Dec 13:58  │       └──  page.tsx
-a---  207 16 Dec 13:59  ├──  default.tsx
-a---  385 16 Dec 13:52  ├──  layout.tsx
-a---  202 16 Dec 13:53  └──  page.tsx

上面是React的并行路由,访问
http://localhost:3000/parallelroutes/settings的时候 @analytics/layout.tsx是否会被渲染? 为什么?

我的测试结果是 没有被渲染

AI的解释:
@analytics default.js 不会渲染 Layout。因为 @analytics 中没有 /settings 对应的页面，插槽被判定为“不匹配”（Unmatched），因此会完全跳过该插槽的常规渲染树（包括其 Layout），直接渲染 default.js 作为回退。

问了几个AI 大部分 都认为 @analytics/layout.tsx 会被渲染

并行路由的 layout.tsx 是其对应槽位的容器外壳，只要该槽位被定义为页面的一部分，其 layout 就会生效。
default.tsx 是槽位的后备内容，当没有匹配到具体页面时显示，确保了布局结构的完整性。
因此，在 /settings 路径下，你得到的不是一个“空白”的 @analytics 区域，而是其 default.tsx 中定义的内容。

官方文档有没有关于这个的说明?

Answer 1

不会，@analytics和@analytics的子页面会渲染@analytics/layout.tsx @team和@team的子页面会渲染@team/layout。目录下的layout只会渲染当前目录和子目录下的路由

你这里setting，匹配到@team下去了

Answer 2

你这个情况我之前也碰到过～React 并行路由里，@analytics/layout.tsx 是不会被渲染的。
因为并行路由的规则是：只有当对应的路由段（比如这里的 settings）匹配上了，它所在路由段的 layout 才会生效；要是路由不匹配（像你访问的 settings 不在 @analytics 下面），这个路由段就会被标记成 “未匹配（Unmatched）”，那它对应的 layout 和页面都会被跳过，直接渲染 default.tsx。
你测试结果没渲染是对的～那些 AI 说会渲染，估计是没搞清楚并行路由 “路由段不匹配就跳过整个段” 的逻辑～