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之前的并行路由，只会导致第一个并行路由的布局渲染失败。
因赛AIGC
因赛AIGC解决营销全链路应用场景
73 查看详情
问题排查结果表明，该问题与Next.js v14版本有关。将Next.js版本降级到v13后，问题即可解决。这强烈暗示Next.js v14在处理并行路由的layout.js渲染，特别是第一个并行路由的布局渲染时存在bug。 v13版本修复了这个缺陷。
因此，如果在Next.js v14中遇到类似问题，建议尝试降级到v13版本，或等待官方修复。
以上就是Next.js v14并行路由布局渲染失败：第一个路由布局无法显示是什么原因？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/280362.html
微信扫一扫 
支付宝扫一扫 
