Next.js 13.5 App Router中组件树向上传递状态的最佳方案

一、嵌套布局与子组件的状态同步（购物车场景） #

针对 Grandparent（根布局）→ Parent（子布局）→ Child（页面组件）的层级结构，实现 Child 更新状态并同步到 Grandparent（如导航栏显示购物车数量），以下是两种可行方案：

1. React Context（原生方案，推荐轻量场景） #

完全适用，App Router 的布局本质仍是 React 组件，只需在顶层布局（如 Root Layout，即你的 Grandparent）中创建 Context Provider，所有嵌套布局和组件即可共享状态。

示例代码：

// app/cart-context.tsx
'use client';

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

type CartContextType = {
  itemCount: number;
  incrementCount: () => void;
  decrementCount: () => void;
};

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

export function CartProvider({ children }: { children: ReactNode }) {
  const [itemCount, setItemCount] = useState(0);

  const incrementCount = () => setItemCount(prev => prev + 1);
  const decrementCount = () => setItemCount(prev => Math.max(0, prev - 1));

  return (
    <CartContext.Provider value={{ itemCount, incrementCount, decrementCount }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart() {
  const context = useContext(CartContext);
  if (!context) throw new Error('useCart must be used within CartProvider');
  return context;
}

在根布局（Grandparent）中引入 Provider（若根布局是 Server Component，需将使用 useCart 的导航栏抽为单独的客户端组件）：

// app/layout.tsx (Grandparent布局)
import { CartProvider } from './cart-context';
import Navbar from './components/Navbar';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <CartProvider>{children}</CartProvider>
      </body>
    </html>
  );
}

客户端导航栏组件：

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

import { useCart } from '../cart-context';

export default function Navbar() {
  const { itemCount } = useCart();
  return <div>购物车：{itemCount}件</div>;
}

Child 组件中调用更新方法：

// app/[...page]/page.tsx (Child组件)
'use client';

import { useCart } from '../cart-context';

export default function ChildPage() {
  const { incrementCount } = useCart();
  return <button onClick={incrementCount}>添加到购物车</button>;
}

2. Zustand（第三方状态管理，推荐复杂场景） #

若购物车状态后续需扩展（如商品列表、价格计算等），Zustand 是更简洁的选择，无需嵌套 Provider，可直接在任意客户端组件中调用状态和更新方法。

示例代码：

// app/cart-store.ts
'use client';

import { create } from 'zustand';

type CartStore = {
  itemCount: number;
  increment: () => void;
  decrement: () => void;
};

export const useCartStore = create<CartStore>((set) => ({
  itemCount: 0,
  increment: () => set((state) => ({ itemCount: state.itemCount + 1 })),
  decrement: () => set((state) => ({ itemCount: Math.max(0, state.itemCount - 1) })),
}));

导航栏组件中使用：

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

import { useCartStore } from '../cart-store';

export default function Navbar() {
  const itemCount = useCartStore((state) => state.itemCount);
  return <div>购物车：{itemCount}件</div>;
}

Child 组件中更新状态：

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

import { useCartStore } from '../cart-store';

export default function ChildPage() {
  const increment = useCartStore((state) => state.increment);
  return <button onClick={increment}>添加到购物车</button>;
}

方案对比 #

• React Context：原生无依赖，学习成本低，适合轻量、局部共享状态；状态复杂时需配合 memo、useMemo 优化重渲染。
• Zustand：API 简洁，默认仅订阅组件用到的状态（性能更优），适合全局或复杂状态管理；需引入第三方依赖，但体积小、无额外嵌套。

二、Next.js 中类似 Remix useMatches 的方案 #

App Router 没有直接对应 useMatches 的 API，但可通过以下方式实现父级数据共享：

1. Server Component 的 Loader 数据传递 #

若为服务端获取的数据，父布局的 Loader 返回值可通过 props 传递给子布局和页面：

// app/layout.tsx (Grandparent布局，Server Component)
export async function Layout({ children, params }) {
  const parentData = await fetchParentData(params);
  return (
    <div>
      <ParentLayout parentData={parentData}>{children}</ParentLayout>
    </div>
  );
}

2. 客户端状态共享 #

若为客户端状态，仍推荐使用 Context 或 Zustand，这是 App Router 中客户端组件间共享状态的标准方式。

3. React Query/SWR（服务端数据同步） #

若购物车状态需与后端同步，可使用 React Query 或 SWR 缓存数据，所有组件均可获取最新服务端数据：

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

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

async function fetchCartCount() {
  const res = await fetch('/api/cart/count');
  return res.json();
}

export default function Navbar() {
  const { data: itemCount } = useQuery({
    queryKey: ['cartCount'],
    queryFn: fetchCartCount,
  });
  return <div>购物车：{itemCount || 0}件</div>;
}

Child 组件更新后，调用 queryClient.invalidateQueries(['cartCount']) 即可触发导航栏重新获取最新数据。

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