Nextjs 13.5.4：父加载页面覆盖子加载页面

Question

我正在将 nextjs 13.5.4 与应用程序路由器一起使用。我试图为每个页面实现不同的loading.tsx，但问题是父loading.tsx 样式在使用其自己的loading.tsx 渲染嵌套页面时始终显示。因此，当我渲染嵌套页面时，在获取数据之前会应用多个加载页面。

Answer 1

这是 Next.js 设计的。

• 任何路线段都可以选择定义自己的布局。这些布局将在该段中的所有页面之间共享。
• 默认情况下，路由中的布局是嵌套的。每个父布局都使用 React Children 属性包裹其下方的子布局。

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

因此，如果您有

app/parent/layout.tsx

和

app/parent/child/layout.tsx

：

• 当您访问

  /parent

  时，仅适用于

  parent/layout.tsx

• 当您访问

  /parent/child

  时，两种布局都会应用，其中

  parent/child/layout.tsx

  被

  parent/layout.tsx

包裹

您可以在此处阅读有关此行为的更多信息：https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts