React中如何确保Context更新完成后再执行路由跳转？

问题背景 #

我有一组（目前3个）页面，必须用户完成前一页面的特定操作（如点击复选框、链接）才能访问，使用react-context传递状态，但遇到了状态未同步的问题：

核心代码 #

Consent.tsx

const onConsentButtonClick = () => {
  setMyContext({userConsent: true});
  navigate("postConsent"); // 使用react-router v6，navigate来自useNavigate();
}

PostConsent.tsx

useEffect(() => {
  if(!myContext.userConsent) { // 渲染时userConsent始终为undefined
    // 显示错误并回退到Consent.tsx
  }
}, []);

这段代码无法正常运行，原因是PostConsent组件在Context状态完成更新前就已渲染。通过添加1秒延时验证了这一点，修改按钮点击函数为以下形式可临时解决，但这不是合理方案：

const onConsentButtonClick = () => {
  setMyContext({userConsent: true});
  setTimeout(() => {
    navigate("postConsent");
  }, 1000);
}

我想知道：

• 有没有办法确保Context更新完成后再跳转到下一页面？
• 我是否正确使用了Context？
• 有没有更优的实现方式？

注：无法使用属性透传，也不能通过location传递状态（不希望浏览器后退功能作用于这组页面）。

完整Context文件 #

const MyContext = createContext(null);

export function MyProvider({ children }) {
    const [myContext, setMyContext] = useState({});
    return (
        <MyContext.Provider value={{myContext, setMyContext}}>
            {children}
        </MyContext.Provider>
    );
}

export const useMyContext = () => {
    return useContext(MyContext);
}

组件使用方式 #

const {myContext, setMyContext} = useMyContext();

自定义Hook尝试（更新） #

根据思路，我编写了一个自定义Hook封装Context设置和更新后的路由跳转逻辑：

type SetContextAndNavigate = {
    context: any,
    navigate: string
}

const defaultHookValues: SetContextAndNavigate = { context: {initialHookValue: "hook"}, navigate: "nowhere" }; 

function useSetContextAndNavigate() {
  const { myContext, setMyContext } = useMyContext();
  const [currentValues, setAndNavigate] = useState(defaultHookValues);
  const navigate = useNavigate();

  const setValuesBeforeNavigation = (args: SetContextAndNavigate) => {
    setAndNavigate(args);
    setMyContext(args.context);
  }

  useEffect(() => {
    if(currentValues.context == myContext) {
        navigate(currentValues.navigate);
    }
  }, [myContext]);

  return setValuesBeforeNavigation;
}

组件中使用：

const setContextAndNavigate = useSetContextAndNavigate();
setContextAndNavigate({context: {...consents}, navigate: "postConsent"});

解决方案 #

1. Context使用正确性确认 #

你的Context基础用法是正确的，但初始状态设为空对象{}会导致userConsent初始值为undefined，建议给初始状态添加默认值，让逻辑更清晰：

// MyContext文件中修改初始状态
const [myContext, setMyContext] = useState({userConsent: false});

2. 确保Context更新后跳转的正确方式 #

React的状态更新（包括Context中的状态）是异步的，直接在setMyContext后调用navigate会导致跳转时状态未同步。以下是两种可靠方案：

方案一：在Consent组件中监听Context变化

在Consent.tsx中通过useEffect监听Context状态，当userConsent变为true时再执行跳转：

const { myContext, setMyContext } = useMyContext();
const navigate = useNavigate();

useEffect(() => {
  if (myContext.userConsent) {
    navigate("postConsent");
  }
}, [myContext, navigate]);

const onConsentButtonClick = () => {
  setMyContext({userConsent: true});
};

方案二：优化自定义Hook

你写的自定义Hook思路可行，但存在对象引用比较的问题（currentValues.context == myContext永远为false，因为每次setMyContext都会生成新对象）。优化后的Hook如下：

type SetContextAndNavigate = {
    context: { userConsent?: boolean },
    navigate: string
}

function useSetContextAndNavigate() {
  const { myContext, setMyContext } = useMyContext();
  const navigatePath = useRef<string>("");
  const navigate = useNavigate();

  const setValuesBeforeNavigation = (args: SetContextAndNavigate) => {
    navigatePath.current = args.navigate;
    setMyContext(args.context);
  }

  useEffect(() => {
    // 验证目标状态并执行跳转
    if (myContext.userConsent && navigatePath.current) {
        navigate(navigatePath.current);
        // 跳转后清空ref，避免重复触发
        navigatePath.current = "";
    }
  }, [myContext, navigate]);

  return setValuesBeforeNavigation;
}

3. 更优的流程管理思路 #

如果这组页面是一个线性流程，可以结合React Router的嵌套路由+Context流程状态管理：

• 在Context中维护流程的当前步骤（如currentStep: 1）
• 给每个页面设置路由守卫（在useLayoutEffect中检查当前步骤是否符合访问要求，不符合则跳转回对应页面）
• 完成操作后更新Context中的步骤，再自动跳转到下一页

这种方式能更清晰地管理流程状态，同时避免用户直接通过URL访问未授权的页面。

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