React Context内调用useNavigate报需在useEffect中调用错误

You should call navigate() in a React.useEffect(), not when your component is first rendered, useNavigate error

• 在Context中定义getCurrencyFromPath方法，通过useContext暴露给业务组件调用
• 方法仅在组件挂载阶段的useEffect钩子中执行，作用是从URL查询参数中解析币种参数（示例路径：/HistoricalRates?currency=USD）
• 预期逻辑：校验查询参数中的币种是否属于应用支持的合法范围，非法则自动调用navigate重定向到默认币种USD对应页面，合法则正常读取参数
• 实际表现：传入非法币种参数时，预期的挂载后跳转未执行，反而抛出上述错误；直接将navigate跳转逻辑写在组件的useEffect中可正常运行，但抽离封装到Context方法中就会触发报错
• 约束要求：参数校验+跳转的逻辑必须保留在Context方法中，不接受直接将逻辑写在组件useEffect中的方案

业务组件代码 #

const Header: React.FC = () => {
  const { getCurrencyFromPath, currency, setCurrency } = React.useContext(HistoricalRatesContext);

  const navigate = useNavigate();

  React.useEffect(() => {
    getCurrencyFromPath();
  }, []);

  const onPickerValueChange = (currency: Currencies) => {
    navigate(`/HistoricalRates?currency=${currency}`);
    setCurrency(currency);
  };

  return (
    <div className={classes.chartHeader}>
      <PageHeader text={`USD historical rates`}></PageHeader>
      <CurrencyPicker className={classes.pickerAdditional} value={currency} 
       changeValue={onPickerValueChange} blockedCurrencies={[Currencies.PLN]} />
    </div>
  );
};

export default Header;

Context 代码 #

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

// ... 其他上下文逻辑

const navigate = useNavigate();

const getCurrencyFromPath = () => {
    let currency = query.get('currency') || '';

    if (!isValidCurrency(currency)) {
      currency = Currencies.USD;
      navigate(`/HistoricalRates?currency=${currency}`);
    }

    setCurrency(currency as Currencies);
};

React Router v6 内部对useNavigate返回的navigate函数做了调用场景强校验：一旦识别到navigate在组件首次渲染的同步执行流中被调用，就会直接抛出这个错误。
把逻辑抽离到Context后，getCurrencyFromPath是在Context Provider组件的渲染阶段创建的，函数内闭包捕获的navigate实例绑定的是Provider组件的上下文。哪怕实际是在子组件的useEffect里调用这个方法，React Router的校验逻辑顺着执行栈识别到navigate的引用来自渲染阶段创建的闭包，就会误判为导航是在渲染阶段触发，直接拦截报错。

不需要把逻辑挪回组件useEffect，只需要把Context方法里的navigate调用放到微任务队列执行，绕开React Router的同步渲染流检测即可，原有校验+跳转的逻辑可以完全保留在Context内部：

const getCurrencyFromPath = () => {
    let currency = query.get('currency') || '';

    if (!isValidCurrency(currency)) {
      currency = Currencies.USD;
      // 将navigate调用放入微任务，绕开React Router的渲染阶段检测
      queueMicrotask(() => {
        navigate(`/HistoricalRates?currency=${currency}`);
      });
    }

    setCurrency(currency as Currencies);
};

微任务的执行时机早于浏览器首次像素渲染，用户完全感知不到延迟，不会出现页面先渲染错误币种再跳转、地址栏闪动的问题。

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