next.js v14并行路由布局渲染异常：首个路由布局缺失
使用Next.js v14构建应用时，开发者可能会遇到一个棘手的问题：在使用app目录和并行路由（文件夹名前缀为@）以及布局组件(layout.js)时，第一个并行路由的布局无法正确渲染，而后续的并行路由布局却能正常显示。
问题重现：
项目基于Next.js v14的create-next-app命令创建，采用app目录路由模式。在app目录下创建包含并行路由的文件夹（例如d文件夹），并在其中创建@login和@logout两个并行路由文件夹，每个文件夹内包含page.js和layout.js文件。 奇怪的是，d/@login目录下的layout.js无法渲染，而d/@logout目录下的layout.js却能正常工作。 即使删除@login文件夹，@logout页面的布局仍然无法渲染。 更令人困惑的是，如果在@login之前添加其他并行路由文件夹，则只有第一个并行路由的布局会缺失。
排查结果：
问题并非代码错误，也并非Next.js官方文档中列出的常见问题。 最终发现，根本原因在于Next.js的版本。 将Next.js版本从v14降级到v13后，无需任何代码修改，布局渲染问题即可解决。 这表明这是一个Next.js v14的版本兼容性问题。
以上就是Next.js v14并行路由布局渲染失败：第一个路由布局为何无法显示？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/183288.html
微信扫一扫 
支付宝扫一扫 
