React Router中如何通过Link传递props？已尝试state和location未成功

1. 修改Footer组件中的Link，通过state传递数据 #

React Router的Link组件支持通过state属性传递额外数据，你需要把目标数据打包到state对象中：

<Link 
  to='/checkout'
  state={{
    cart,
    cartPrice,
    handleIncrement,
    handleDecrement
  }}
  className='login-sec'
>
  <span className='heading'>Continue</span>
  <span className='arrow'>→</span>
</Link>

2. 在Checkout组件中接收传递的数据 #

在/checkout对应的Checkout组件里，用React Router的useLocation钩子获取state中的数据：

import { useLocation } from 'react-router-dom';

const Checkout = () => {
  const location = useLocation();
  // 解构数据，加|| {}避免页面刷新后state为空报错
  const { cart, cartPrice, handleIncrement, handleDecrement } = location.state || {};

  // 后续即可使用这些数据
  return (
    <div>
      <h2>Checkout</h2>
      <p>Total Price: ₹{cartPrice}</p>
      {/* 这里可以用cart渲染购物车内容，调用增减函数 */}
    </div>
  );
};

export default Checkout;

关键注意事项 #

• 函数传递有局限性：handleIncrement、handleDecrement依赖Footer组件的上下文，在Checkout组件调用时可能出现状态不同步；且刷新页面后location.state会丢失（state存在内存中，非持久化存储）。
• 持久化方案：如果需要页面刷新后仍保留购物车数据，建议把购物车状态提升到全局状态管理（如Context API、Redux），或存储到localStorage/sessionStorage中，Checkout组件直接从全局状态或存储读取数据，无需通过Link传递。

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