背景:使用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
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>
)
}
为什么第一个并行路由的布局是不能够展示的,第二个开始的布局可以展示,效果是这样的
而且神奇的是当我将@login这个文件夹删掉之后,@logout中的页面是能够显示,但是布局没有渲染出来
奇葩的是只有第一个并行路由中的layout.js是渲染不出来的
我多加了几个文件夹名按照字典序排在login前面的并行路由,然后逐个删去,效果就是只有第一个布局渲染不出来
破案了,还是next.js版本问题。将next.js从v14降到v13后,代码一点没改,就成功了。。。
