React电商应用useNavigate传状态至/success路由时state为null求助

先查最核心的问题：跳转时state是否传对 #

打开你的Cart.js，确认useNavigate的调用是正确格式：

const navigate = useNavigate();

// 支付成功后的跳转代码
navigate('/success', {
  state: { stripeData: 你的Stripe支付数据 }
});

如果用的是window.location.href = '/success'或者<Link to="/success">但没附带state参数，state必然为null——只有navigate函数的第二个参数才能正确传递内存态的路由state。

页面刷新导致state丢失？用两种方式补位 #

React路由的state存在内存中，用户刷新/success页面后state会直接清空。可以选下面两种方案：

• 临时存本地存储：跳转前把数据存入sessionStorage，到/success页面读取后立即删除：

// Cart.js中支付成功后执行
sessionStorage.setItem('stripePayData', JSON.stringify(你的支付数据));
navigate('/success');

// Success.js中读取数据
const stripeData = JSON.parse(sessionStorage.getItem('stripePayData'));
sessionStorage.removeItem('stripePayData'); // 用完清除，避免残留数据干扰后续操作

• 用订单ID拉取API数据：把订单ID通过state或URL参数传递，在/success路由调用API获取完整支付数据：

// Cart.js中传递订单ID
navigate('/success', { state: { orderId: 你的订单ID } });
// 或者直接放在URL参数里更稳妥
navigate(`/success?orderId=${你的订单ID}`);

// Success.js中获取ID并请求API
const location = useLocation();
const orderId = location.state?.orderId || new URLSearchParams(location.search).get('orderId');
// 调用你的API，用orderId换取完整支付数据

排查Stripe回调跳转的干扰 #

如果支付完成后是Stripe的页面跳转回你的/success路由，之前用navigate传递的state会直接丢失——这属于外部跳转，内存态的state无法携带。这种情况需要让Stripe回调时将支付ID/订单ID作为URL参数返回，在/success路由读取参数后调用API获取数据。

最后检查代码细节 #

• 确认Cart.js中的跳转操作是在Stripe支付API请求完成后执行的，避免还没拿到支付数据就跳转。
• Success.js中获取state时添加可选链，避免因state为null报错：

const location = useLocation();
const stripeData = location.state?.stripeData;
console.log(stripeData);

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