next.js v14并行路由布局渲染异常：首个路由布局缺失
在Next.js v14中使用app路由器和并行路由时，可能会遇到一个布局渲染问题：第一个并行路由的布局组件(layout.js)无法正确显示，而后续的并行路由布局却能正常渲染。
本文分析了该问题。一个开发者在使用create-next-app创建的项目中，采用了以下目录结构：
app
└──d
├──layout.js
├──page.js
├──@login
│ ├──page.js
│ └──layout.js
└──@logout
├──page.js
└──layout.jsd目录及子目录@login、@logout都包含layout.js布局组件。运行后，发现@login目录下的布局无法渲染，而@logout目录下的布局可以正常显示。 即使删除@login目录，@logout的页面内容显示正常，但其布局仍然无法渲染。 添加更多字典序位于@login之前的并行路由，只会导致第一个并行路由的布局渲染失败。
问题排查结果表明，该问题与Next.js v14版本有关。将Next.js版本降级到v13后，问题即可解决。这强烈暗示Next.js v14在处理并行路由的layout.js渲染，特别是第一个并行路由的布局渲染时存在bug。 v13版本修复了这个缺陷。
因此，如果在Next.js v14中遇到类似问题，建议尝试降级到v13版本，或等待官方修复。
以上就是Next.js v14并行路由布局渲染失败：第一个路由布局无法显示是什么原因？的详细内容，更多请关注php中文网其它相关文章！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
