为什么next.js第一个并行路由的布局不能够渲染的,第二个并行路由的布局可以展示?-灵析社区

正确计算方式

背景:使用next.js v14中的create-next-app命令建立了一个项目,其中路由选择app路由而不是pages路由 难点:使用并行路由 @folder中的布局 当我使用并行路由的时候是没问题的,然后当我在并行路由目录下建立并使用layout.js的时候,出现了一个很奇怪的问题,我的第一个并行路由文件夹的下的layout.js是不能够显示的,当我再写一个并行路由的时候,第二个并行路由文件夹下的layout.js是能够显示的,我没有在next.js的官方文档中找到这个问题的解决方法 这是我的部分文件目录: > 引用 > app > \--d > \----layout.js > \----page.js > \------@login > \--------page.js > \--------layout.js > \------@logout > \--------page.js > \--------layout.js > ![image.png](https://wmprod.oss-cn-> shanghai.aliyuncs.com/c/user/20241009/70cbd3f3a658d0719fe7919527e4bb63.png) d/layout.js import React from 'react' export default function Layout({ children, login, logout }) { return ( d的布局{children},{logout},{login} ) } d/page.js import React from 'react' export default function Page() { return ( d的页面 ) } d/@login/layout.js import React from 'react' export default function Layout({children}) { return ( login的布局{children} ) } d/@login/page.js import React from 'react' export default function Page() { return ( login的页面 ) } d/@logout/layout.js import React from 'react' export default function Layout({ children }) { return ( logout的布局: {children} ) } d/@logout/page.js import React from 'react' export default function Page() { return ( d/@logout 的页面 ) } 为什么第一个并行路由的布局是不能够展示的,第二个开始的布局可以展示,效果是这样的 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/2fec8484a88ec39083132350457b14a1.png) 而且神奇的是当我将@login这个文件夹删掉之后,@logout中的页面是能够显示,但是布局没有渲染出来 奇葩的是只有第一个并行路由中的layout.js是渲染不出来的 我多加了几个文件夹名按照字典序排在login前面的并行路由,然后逐个删去,效果就是只有第一个布局渲染不出来 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/03086cacdbce888d5997adba215934ad.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/e8ada31858d532611bceb5062772e464.png)

阅读量:145

点赞量:0

问AI
破案了,还是next.js版本问题。将next.js从v14降到v13后,代码一点没改,就成功了。。。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/51e382b42f3fc6ee2f1aa5a4875d7a24.png)