Next.js/React无需react-dom-router跨页面传递cart对象props方法

跨页传props失败的核心原因是Next.js采用文件系统路由，访问/cart路径时CartPage组件由框架直接渲染，主页持有的cart状态不会自动通过路由传递给目标页面，不需要依赖react-dom-router，用以下两种原生方案即可实现需求。

购物车属于全站通用的全局状态，不需要逐页传递，放在Context中所有页面都可以直接访问，刷新页面也能自动拉取最新数据，是电商类场景的标准实现方式。

• 新建context/CartContext.js封装购物车状态和相关方法：

import { createContext, useContext, useState, useEffect } from 'react';
import commerce from '../lib/commerce'; // 替换为你项目中commerce实例的引入路径

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cart, setCart] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchCart = async () => {
    setLoading(true);
    setCart(await commerce.cart.retrieve());
    setLoading(false);
  };

  // 可将加购、修改购物车数量、删除商品等逻辑统一封装在此
  const addToCart = async (productId, quantity) => {
    const res = await commerce.cart.add(productId, quantity);
    setCart(res.cart);
    return res;
  };

  useEffect(() => {
    fetchCart();
  }, []);

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

export const useCart = () => useContext(CartContext);

• 在_app.js（Pages Router）或根布局文件（App Router）中全局注入Provider，保证所有页面都能访问购物车状态：

import { CartProvider } from '../context/CartContext';

function MyApp({ Component, pageProps }) {
  return (
    <CartProvider>
      <Component {...pageProps} />
    </CartProvider>
  );
}

export default MyApp;

• 修改CartPage组件，直接通过自定义hook拿cart数据，不需要父组件传props：

import React from "react";
import { CartContainer } from "../components";
import { useCart } from "../context/CartContext";

const CartPage = () => {
  const { cart, loading } = useCart();
  if (loading) return <div>购物车加载中</div>;

  return (
    <div>
      <CartContainer cart={cart} />
    </div>
  );
};

export default CartPage;

主页的加购、购物车读取逻辑也可以直接替换为useCart()暴露的方法和状态，购物车数据更新后全局同步，跳转到购物车页时直接读取最新值即可。

如果不想引入全局状态，可以在跳转到购物车页面前把cart对象临时存在sessionStorage，目标页面加载时读取即可，注意该方案刷新页面后临时存储的数据会丢失。

• 主页跳转购物车的逻辑中存入数据：

import { useRouter } from 'next/router';

const router = useRouter();
const goToCartPage = () => {
  sessionStorage.setItem('tempCart', JSON.stringify(cart));
  router.push('/cart');
};

• CartPage加载时读取存储的购物车数据：

import React, { useState, useEffect } from "react";
import { CartContainer } from "../components";

const CartPage = () => {
  const [cart, setCart] = useState(null);

  useEffect(() => {
    const storedCart = sessionStorage.getItem('tempCart');
    if (storedCart) {
      setCart(JSON.parse(storedCart));
      sessionStorage.removeItem('tempCart');
    }
  }, []);

  if (!cart) return <div>加载中</div>;

  return (
    <div>
      <CartContainer cart={cart} />
    </div>
  );
};

export default CartPage;

不要尝试通过Next.js的Link或router直接传递复杂对象props，文件路由下页面组件的props默认只接收框架注入的默认参数（如服务端返回的pageProps、路由参数等），手动传递的自定义props不会被识别。

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