Next.js 13：不使用useContext/useReducer，如何从layout传全局状态到路由？

在Next.js 13的App Router架构下，你可以通过React.cloneElement方法直接给页面组件注入props，无需依赖状态管理工具，完美适配前后端分离场景。

实现步骤 #

1. 在Layout中获取数据并传递props
   因为Layout支持异步函数，你可以直接在Layout里调用后端接口获取需要传递的数据，然后通过React.cloneElement克隆页面组件（即children）并传入props。

   示例代码（layout.tsx）：

   import { ReactNode, ReactElement } from 'react';
   import React from 'react';
   
   // 调用后端接口获取数据（前后端分离场景）
   async function fetchBackendData() {
     const res = await fetch('https://your-backend-api.com/your-data', { 
       cache: 'no-store' // 根据需求调整缓存策略
     });
     return res.json();
   }
   
   export default async function RootLayout({ children }: { children: ReactNode }) {
     const backendData = await fetchBackendData();
   
     // 克隆页面组件并注入props
     const pageWithProps = React.cloneElement(
       children as ReactElement,
       { layoutData: backendData }
     );
   
     return (
       <html lang="zh-CN">
         <body>{pageWithProps}</body>
       </html>
     );
   }
   

2. 在页面组件中接收props
   直接在页面组件的参数中声明需要接收的props即可，TypeScript用户可以添加类型定义。

   示例代码（page.tsx）：

   // 类型定义，可选，TypeScript用户推荐添加
   interface PageProps {
     layoutData: {
       key1: string;
       key2: number;
       // 根据后端返回数据结构定义
     };
   }
   
   export default function HomePage({ layoutData }: PageProps) {
     return (
       <div>
         <h1>首页</h1>
         <p>从Layout传递的后端数据：{layoutData.key1}</p>
       </div>
     );
   }
   

注意事项 #

• 嵌套Layout场景：如果使用多层嵌套Layout，同样可以逐层通过React.cloneElement传递props，父Layout传给子Layout，子Layout再传给页面。
• 类型断言：因为children在TypeScript中类型是ReactNode，需要断言为ReactElement才能使用cloneElement，确保类型安全。
• 缓存策略：根据业务需求调整fetch的缓存策略（如cache: 'force-cache'或'no-store'），适配前后端分离的接口调用场景。

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