ReactJS中如何在路由切换时调用函数？（电商结账场景）

API 探路者

2026-8-19

解决React Router v6中离开Checkout页面时重置结账数据的问题

你之前用window.location.href作为useEffect依赖的方法无效，是因为路由切换时URL先变更，此时Checkout组件已经进入卸载流程，对应的useEffect不会再触发。下面是两种在Checkout组件内实现需求的方案：

方案一：利用组件卸载的清理函数（适用于Checkout组件仅对应`/checkout`路由）

当用户离开Checkout页面时，组件会被卸载，此时useEffect的清理函数会执行，刚好可以在这里调用resetCheckout()：

import { useEffect } from 'react';

const Checkout = () => {
  useEffect(() => {
    // 组件挂载时无操作，清理函数在组件卸载时执行
    return () => {
      resetCheckout();
    };
  }, []); // 空依赖确保清理函数仅在卸载时触发

  // 你的结账页面逻辑
  return <div>Checkout Page</div>;
};

方案二：监听路由变化（适用于Checkout有子路由的场景）

如果你的结账流程有子路由（比如/checkout/shipping、/checkout/payment），需要仅在离开整个checkout路径时才重置数据，可以结合useLocation监听路由变化：

import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const Checkout = () => {
  const location = useLocation();
  const isFirstRender = useRef(true);

  useEffect(() => {
    // 跳过首次渲染（组件挂载时的路由初始化）
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    // 当路由不再包含"checkout"时，执行重置
    if (!location.pathname.includes('checkout')) {
      resetCheckout();
    }
  }, [location.pathname]);

  // 你的结账页面逻辑
  return <div>Checkout Page</div>;
};