为什么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
d/layout.js
import React from 'react'

export default function Layout({ children, login, logout }) {
    return (
        <div>d的布局{children},{logout},{login}</div>
    )
}
d/page.js

import React from 'react'

export default function Page() {
    return (
        <div>d的页面</div>
    )
}
d/@login/layout.js

import React from 'react'

export default function Layout({children}) {
    return (
        <div>login的布局{children}</div>
    )
}
d/@login/page.js

import React from 'react'

export default function Page() {
    return (
        <div>login的页面</div>
    )
}
d/@logout/layout.js

import React from 'react'

export default function Layout({ children }) {
    return (
        <div>logout的布局: {children}</div>
    )
}
d/@logout/page.js

import React from 'react'

export default function Page() {
    return (
        <div> d/@logout 的页面</div>
    )
}

为什么第一个并行路由的布局是不能够展示的,第二个开始的布局可以展示,效果是这样的
image.png
而且神奇的是当我将@login这个文件夹删掉之后,@logout中的页面是能够显示,但是布局没有渲染出来

奇葩的是只有第一个并行路由中的layout.js是渲染不出来的
我多加了几个文件夹名按照字典序排在login前面的并行路由,然后逐个删去,效果就是只有第一个布局渲染不出来
image.png
image.png

阅读 1.4k
1 个回答

破案了,还是next.js版本问题。将next.js从v14降到v13后,代码一点没改,就成功了。。。
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题