能否将Next.js并行路由插槽传递给Template而非Layout？

问题背景 #

我正在开发首个Next.js项目，当前在应用根级别定义了并行路由，已实现将插槽传递给根Layout，但希望改用可选的template.js来定义并行路由插槽。尝试迁移后插槽无法渲染，想询问该方案是否可行。

当前项目目录结构：

app/
>@parallel1/
   >page.js
>@parallel2/
   >page.js
layout.js
template.js
page.js

官方文档仅提及在根Layout中放置插槽，示例代码如下：

export default function Layout(props) {
  return (
    <>
      {props.children}
      {props.team}
      {props.analytics}
    </>
  )
}

方案可行性及解决方法 #

可行，但需要手动从根Layout向Template传递并行路由插槽的props

Next.js的并行路由插槽默认只会传递给当前层级的layout.js，而template.js作为Layout的子包装组件，不会自动获取这些插槽props。要实现需求，需要两步修改：

1. 修改根layout.js，传递插槽props给Template
   根Layout需要将接收到的并行路由插槽props通过children函数传递给Template（因为Template是Layout的子组件，children在这里是一个接收props的函数）：

   export default function RootLayout({ children, parallel1, parallel2 }) {
     // 将并行路由插槽props传递给template
     return children({ parallel1, parallel2 });
   }
   

2. 在根template.js中接收并渲染插槽
   现在Template可以直接接收传递过来的插槽props，然后在组件中渲染：

   export default function RootTemplate({ children, parallel1, parallel2 }) {
     return (
       <>
         {/* 渲染主页面内容 */}
         {children}
         {/* 渲染并行路由插槽内容 */}
         {parallel1}
         {parallel2}
       </>
     );
   }
   

注意事项 #

• 确保使用的Next.js版本为v13.4及以上（App Router的并行路由和Template特性在该版本后稳定）
• 若后续路由层级有嵌套，同理需要上层Layout向下传递插槽props才能在对应层级的Template中使用

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