Next.js 13+ App Router如何向RootLayout的children传递props？

以下是几种无需依赖Redux的状态传递方案，适配App Router架构：

1. React Context API（最常用的客户端状态管理方案） #

通过创建全局Context，将购物车的状态和操作方法封装进去，在Layout中用Provider包裹所有子组件，后续任何页面/组件都能直接通过Hook获取状态。

实现步骤： #

1. 创建Cart Context文件

// app/contexts/CartContext.tsx
'use client';

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义购物车项类型
type CartItem = {
  id: string;
  name: string;
  price: number;
  quantity: number;
};

type CartContextType = {
  cart: CartItem[];
  addToCart: (item: CartItem) => void;
  removeFromCart: (itemId: string) => void;
};

const CartContext = createContext<CartContextType | undefined>(undefined);

export function CartProvider({ children, initialCart = [] }: { children: ReactNode; initialCart?: CartItem[] }) {
  const [cart, setCart] = useState<CartItem[]>(initialCart);

  const addToCart = (item: CartItem) => {
    setCart(prev => {
      const existingItem = prev.find(i => i.id === item.id);
      if (existingItem) {
        return prev.map(i => i.id === item.id ? {...i, quantity: i.quantity + 1} : i);
      }
      return [...prev, {...item, quantity: 1}];
    });
  };

  const removeFromCart = (itemId: string) => {
    setCart(prev => prev.filter(item => item.id !== itemId));
  };

  return (
    <CartContext.Provider value={{ cart, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  );
}

// 封装自定义Hook，简化调用
export function useCart() {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart必须在CartProvider内部使用');
  }
  return context;
}

2. 在Layout中使用Provider包裹子组件

// app/layout.tsx
import { CartProvider } from './contexts/CartContext';
import { Inter } from 'next/font/google';
import Navbar from './components/Navbar';

const inter = Inter({ subsets: ['latin'] });

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 可选：服务端获取初始购物车数据（比如用户登录后的购物车）
  // const initialCart = await fetchUserCart();

  return (
    <html lang="en">
      <body className={inter.className}>
        <CartProvider /* initialCart={initialCart} */>
          <Navbar />
          {children}
        </CartProvider>
      </body>
    </html>
  );
}

3. 在子组件/页面中调用

// app/components/Navbar.tsx
'use client';

import { useCart } from '../contexts/CartContext';

export default function Navbar() {
  const { cart } = useCart();
  return (
    <nav>
      <div>购物车：{cart.reduce((sum, item) => sum + item.quantity, 0)} 件</div>
    </nav>
  );
}

// app/products/[id]/page.tsx
'use client';

import { useCart } from '../../contexts/CartContext';

export default function ProductPage({ params }: { params: { id: string } }) {
  const { addToCart } = useCart();
  // 模拟商品数据
  const product = { id: params.id, name: '示例商品', price: 99 };

  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={() => addToCart(product)}>加入购物车</button>
    </div>
  );
}

2. TanStack React Query（适合与后端同步的购物车） #

如果购物车数据需要持久化到后端，React Query可以帮你处理数据的获取、缓存、更新逻辑，无需手动管理状态同步。

实现示例： #

// app/hooks/useCart.ts
'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// 后端API请求函数
async function fetchCart() {
  const res = await fetch('/api/cart', { credentials: 'include' });
  if (!res.ok) throw new Error('获取购物车失败');
  return res.json();
}

async function addItemToCart(item: any) {
  const res = await fetch('/api/cart', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(item),
    credentials: 'include',
  });
  if (!res.ok) throw new Error('添加商品失败');
  return res.json();
}

async function removeItemFromCart(itemId: string) {
  const res = await fetch(`/api/cart/${itemId}`, {
    method: 'DELETE',
    credentials: 'include',
  });
  if (!res.ok) throw new Error('删除商品失败');
  return res.json();
}

export function useCart() {
  const queryClient = useQueryClient();

  // 获取购物车数据
  const { data: cart, isLoading } = useQuery({
    queryKey: ['cart'],
    queryFn: fetchCart,
  });

  // 添加商品的Mutation
  const addToCart = useMutation({
    mutationFn: addItemToCart,
    onSuccess: () => {
      // 更新缓存，自动刷新购物车数据
      queryClient.invalidateQueries({ queryKey: ['cart'] });
    },
  });

  // 删除商品的Mutation
  const removeFromCart = useMutation({
    mutationFn: removeItemFromCart,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['cart'] });
    },
  });

  return {
    cart,
    isLoading,
    addToCart: addToCart.mutate,
    removeFromCart: removeFromCart.mutate,
    isAdding: addToCart.isPending,
    isRemoving: removeFromCart.isPending,
  };
}

之后在组件中直接调用useCart Hook即可，无需额外的状态管理逻辑。

3. Props透传（仅适用于简单层级场景） #

如果你的页面层级较浅，可以通过React的cloneElement方法给路由子组件传递props，但这种方式在多层路由嵌套时会非常繁琐，仅适合小型项目或简单页面。

示例： #

// app/layout.tsx
'use client';

import { useState } from 'react';
import { Inter } from 'next/font/google';
import Navbar from './components/Navbar';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [cart, setCart] = useState([]);
  
  const addToCart = (item: any) => {
    setCart(prev => [...prev, item]);
  };

  const removeFromCart = (itemId: string) => {
    setCart(prev => prev.filter(item => item.id !== itemId));
  };

  // 给子组件注入props
  const ChildrenWithProps = React.cloneElement(children as React.ReactElement, {
    cart,
    addToCart,
    removeFromCart,
  });

  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar cart={cart} addToCart={addToCart} removeFromCart={removeFromCart} />
        {ChildrenWithProps}
      </body>
    </html>
  );
}

在页面组件中接收props：

// app/page.tsx
'use client';

export default function HomePage({ cart, addToCart }: any) {
  return (
    <div>
      <h1>首页</h1>
      <button onClick={() => addToCart({ id: '1', name: '测试商品' })}>加入购物车</button>
      <p>购物车商品数：{cart.length}</p>
    </div>
  );
}

方案总结 #

• React Context API：适合纯客户端状态管理，无需后端同步的场景，实现简单且全局可用。
• TanStack React Query：适合需要与后端同步的购物车，自动处理数据缓存、刷新和错误状态。
• Props透传：仅适用于层级较浅的简单场景，不推荐复杂项目使用。

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