Next.js 13开发模式下并行路由内页面路由引发无限渲染问题

在Next.js 13开发模式中，访问并行路由内部的页面路由时会触发无限渲染的异常。

项目目录结构 #

app
├── page-with-parallel
│   ├── @parallelroute
│   │   └── page-inside-parallel
│   │       └── page.js
│   └── layout.js
├── globals.css
├── layout.js
└── page.js

关键代码片段 #

app/page-with-parallel/layout.js #

export default function Layout({ parallelroute }) {
    console.log('foo')
    return (
        <div>
            {parallelroute}
        </div>
    );
}

app/page-with-parallel/@parallelroute/page-inside-parallel/page.js #

export default function Page() {
    console.log('bar');
    return (
        <div>
            <h1>Bar</h1>
        </div>
    );
}

复现步骤 #

• 在开发模式下运行项目
• 访问 localhost:3000/page-with-parallel/page-inside-parallel

输出对比 #

预期控制台输出 #

foo
bar

实际控制台输出 #

foo
bar
foo
bar
foo
foo
bar
foo
foo
bar
(this goes on infinitely)

内容的提问来源于stack exchange，提问作者Kyle