React useNavigate钩子调用失败：无效钩子调用错误原因及解决建议

错误原因 #

你碰到的Invalid hook call错误，核心问题是React Hooks（包括useNavigate）只能在函数组件的顶层作用域，或者自定义Hooks里调用，但你现在是在类组件的类方法doLogin内部调用useNavigate，完全违反了Hooks的使用规则。

另外你的代码是类组件写法（用this.state、类方法），而useNavigate是React Router v6专门为函数组件设计的钩子，类组件不支持直接用这类Hooks。

解决方案 #

有两种可行方向，根据你的组件类型选：

方向1：继续用类组件，改用withRouter高阶组件 #

如果不想把类组件改成函数组件，可以用React Router提供的withRouter，它会把navigate注入到类组件的props里：

1. 先导入withRouter：

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

2. 修改doLogin方法，通过this.props.navigate跳转：

doLogin = (event) => {
    event.preventDefault();
    const { email, password } = this.state.loginData;

    login({ email, password })
        .then(response => response.text())
        .then(token => {
            localStorage.setItem('token', token);
            this.props.navigate('/deliveries'); // 改用props里的navigate
        });
}

3. 最后用withRouter包裹你的类组件导出：

export default withRouter(YourLoginComponent);

方向2：把类组件重构为函数组件 #

如果愿意迁移到函数组件（React官方推荐写法），直接用useNavigate就没问题：

重构后的示例代码：

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

const LoginComponent = () => {
    const navigate = useNavigate(); // 在组件顶层调用钩子
    const [loginData, setLoginData] = useState({ email: '', password: '' });

    const doLogin = (event) => {
        event.preventDefault();
        const { email, password } = loginData;

        login({ email, password })
            .then(response => response.text())
            .then(token => {
                localStorage.setItem('token', token);
                navigate('/deliveries');
            });
    }

    // 其他组件逻辑...

    return (
        // 组件JSX内容
    );
}

export default LoginComponent;

关键注意点 #

• 所有React Hooks必须在函数组件的顶层调用，不能在循环、条件判断、类方法或者异步回调里用。
• 类组件和函数组件的Hooks体系不兼容，类组件要使用路由功能，只能通过withRouter或者直接用this.props.history（React Router v5及更早版本），v6里withRouter注入的是navigate方法。

内容的提问来源于stack exchange，提问作者Marcelo Allieri Soto