本文详解在 react router v6 中实现 homepage → product → checkout 多页间数据传递的三种主流方案，重点推荐基于 context api 的全局状态管理方式，并提供可直接运行的完整示例代码与关键注意事项。

本文详解在 react router v6 中实现 homepage → product → checkout 多页间数据传递的三种主流方案，重点推荐基于 context api 的全局状态管理方式，并提供可直接运行的完整示例代码与关键注意事项。

在 React Router v6 中，navigate() 支持通过 state 选项传递临时数据（如单次跳转的选中商品），但该方式存在明显局限：state 在用户刷新页面、直接访问 URL 或使用浏览器后退/前进时会丢失，且无法跨多级路由（如 Homepage → Product → Checkout）可靠传递。因此，针对需在多个页面间持久共享 API 获取的商品列表、购物车项或用户上下文等场景，应采用更健壮的架构设计。

✅ 推荐方案：使用 React Context API 实现全局数据缓存

Context 是 React 官方提供的轻量级状态共享机制，无需引入额外依赖，完美适配“Homepage 获取数据 → Product 展示详情 → Checkout 结算”这类典型电商流程。

1. 创建 ProductContext

// contexts/ProductContext.jsx
import { createContext, useContext, useReducer } from 'react';

const ProductContext = createContext();

const productReducer = (state, action) => {
  switch (action.type) {
    case 'SET_ITEMS':
      return { ...state, items: action.payload };
    case 'SET_SELECTED_ITEM':
      return { ...state, selectedItem: action.payload };
    default:
      return state;
  }
};

export const ProductProvider = ({ children }) => {
  const [state, dispatch] = useReducer(productReducer, {
    items: [],
    selectedItem: null,
  });

  const setItems = (items) => dispatch({ type: 'SET_ITEMS', payload: items });
  const setSelectedItem = (item) => dispatch({ type: 'SET_SELECTED_ITEM', payload: item });

  return (
    <productcontext.provider value="{{" ...state setitems setselecteditem>
      {children}
    </productcontext.provider>
  );
};

export const useProducts = () => {
  const context = useContext(ProductContext);
  if (!context) {
    throw new Error('useProducts must be used within a ProductProvider');
  }
  return context;
};

2. 在 App.js 中包裹路由

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { ProductProvider } from './contexts/ProductContext';
import Homepage from './pages/Homepage';
import Product from './pages/Product';
import Checkout from './pages/Checkout';

function App() {
  return (
    <browserrouter><productprovider><routes><route path="/" element="{<Homepage"></route>} />
          <route path="/products" element="{<Product"></route>} />
          <route path="/checkout" element="{<Checkout"></route>} />
        </routes></productprovider></browserrouter>
  );
}

export default App;

3. 在 Homepage 中获取并存储数据

// pages/Homepage.jsx
import { useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { useProducts } from '../contexts/ProductContext';

const Homepage = () => {
  const { setItems } = useProducts();
  const navigate = useNavigate();

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const res = await axios.get('http://localhost:4000/getitem');
        if (res.status === 200) {
          setItems(res.data.item); // ✅ 全局存储，所有后代组件可读
        }
      } catch (err) {
        console.error('Failed to fetch items:', err);
      }
    };
    fetchItems();
  }, [setItems]);

  const handleAddToCart = (item) => {
    // ✅ 也可在此处设置当前选中项，供 Product 页面直接消费
    useProducts().setSelectedItem(item);
    navigate('/products');
  };

  return (
    <div>
      {/* 渲染商品列表 */}
      {allitems.map((item) => (
        <div key="{item._id}">
          <h3>{item.name}</h3>
          <p>${item.price}</p>
          <button onclick="{()"> handleAddToCart(item)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

export default Homepage;

4. 在 Product 和 Checkout 中直接消费数据

// pages/Product.jsx
import { useProducts } from '../contexts/ProductContext';

const Product = () => {
  const { selectedItem } = useProducts(); // ✅ 实时响应，无需 props 透传

  if (!selectedItem) return <div>Loading...</div>;

  return (
    <div>
      @@##@@
      <h2>{selectedItem.name}</h2>
      <p>Price: ${selectedItem.price}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5189" title="React Best Practices 2 0.1.0"><img
														src="https://img.php.cn/upload/skill/000/000/081/179039717515762.jpg" alt="React Best Practices 2 0.1.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5189" title="React Best Practices 2 0.1.0" class="overflowclass">React Best Practices 2 0.1.0</a>
													<p class="overflowclass">React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5189" title="React Best Practices 2 0.1.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      <p>{selectedItem.description}</p>
      <button onclick="{()"> navigate('/checkout')}>Go to Checkout</button>
    </div>
  );
};

export default Product;

// pages/Checkout.jsx
import { useProducts } from '../contexts/ProductContext';

const Checkout = () => {
  const { selectedItem } = useProducts();

  return (
    <div>
      <h2>Checkout Summary</h2>
      {selectedItem && (
        <div>
          <h3>{selectedItem.name}</h3>
          <p>Final Price: ${selectedItem.price * 1}</p> {/* 示例逻辑 */}
        </div>
      )}
    </div>
  );
};

export default Checkout;

⚠️ 其他方案对比与注意事项

方案	适用场景	缺点	是否推荐
navigate({ state })	单次跳转、非关键数据（如来源页标记）	刷新即丢失；不支持多跳转链；类型安全弱	❌ 不适用于本需求
URL 查询参数 (?id=123)	需要可分享、可书签的资源标识	仅适合简单原始值；敏感信息暴露；长度受限	⚠️ 仅作辅助（如 ID 传递），需配合 API 二次拉取
localStorage / sessionStorage	需跨会话持久化（如用户偏好）	同步读写开销；无响应式更新；需手动序列化/解析	⚠️ 仅用于缓存，不可替代状态管理
Redux / Zustand	大型应用、复杂异步逻辑、严格类型要求	学习成本高；小项目过度设计	✅ 当 Context 无法满足（如需中间件、时间旅行调试）时升级

? 关键实践建议

• 永远避免深层 props 透传：不要让 Homepage → Product → Checkout 逐层传递 item 属性，这违反 React 组合设计原则。
• Context 不是性能瓶颈：合理拆分 Context（如 AuthContext、CartContext、ProductContext），避免大对象频繁更新触发全树重渲染。
• 服务端数据仍需兜底：即使使用 Context，Checkout 页面首次加载时也应调用 getCheckout() 等接口，确保数据最终一致性。
• TypeScript 强烈推荐：为 Context Value 添加类型定义，杜绝运行时 undefined 错误。

通过 Context API，你获得了一个清晰、可测试、易维护的数据共享层——它不依赖路由生命周期，不受用户操作干扰，真正实现了“一次获取，处处可用”。