Reactjs 当我想使用路由器useNavigate时，为什么会出现此错误

我学习了react，不知道如何修复这个简单的错误：

我有一个

我有这个代码

/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import AuthUserContext from './context';

const WithAuthorization = condition => Component => {
    class withAuthorization extends React.Component {
        doStuff = event => {
            const navigate = useNavigate();
            navigate('/', { replace: true });
        };

        render() {
            return (
                <AuthUserContext.Consumer>
                    {authUser => (condition(authUser) ? <Component {...this.props} /> : this.doStuff())}
                </AuthUserContext.Consumer>
            );
        }
    }

    return withAuthorization;
};

export default WithAuthorization;

/*eslint禁用反应/首选无状态函数*/
从“React”导入React；
从'react router dom'导入{useNavigate}；
从“./context”导入AuthUserContext；
const with authorization=condition=>Component=>{
使用Authorization扩展React.Component初始化{
doStuff=事件=>{
const-navigate=useNavigate（）；
导航（“/”，{replace:true}）；
};
render（）{
返回(
{authUser=>（条件（authUser）？：this.doStuff（））}
);
}
}
授权退货；
};
出口默认授权；

它不起作用这一行是原因

const-navigate=useNavigate（）错误是：

错误：无效的钩子调用。钩子只能在身体内部调用
功能部件的设计

我只想在
WithAuthorization
检测到错误路径时导航离开

我是否应该改为使用maybe Redux来执行此操作？发送Redux操作感觉非常可笑？？？
错误是非常自我解释的，您需要在函数组件中使用钩子，并且在顶层（您无法在函数中初始化它），因此请尝试以下方法：

const WithAuthorization = condition => Component => {
 return props => {

    const navigate = useNavigate();

    const doStuff = event => navigate('/', { replace: true });
    
    return (
            <AuthUserContext.Consumer>
                {authUser => (condition(authUser) ? <Component {...props} /> : doStuff())}
            </AuthUserContext.Consumer>
          );
  } 
};

constwithauthorization=condition=>Component=>{
返回道具=>{
const-navigate=useNavigate（）；
const doStuff=event=>navigate（'/'，{replace:true}）；
返回(
{authUser=>（条件（authUser）？：doStuff（））}
);
} 
};
dunnu但我仍然可以使用您的代码在函数“withAuthorization”中调用此“React-Hook”useNavigate，“withAuthorization”既不是React-function组件，也不是自定义React-Hook函数“我将
useNavigate（）
移动到外部函数，然后获取“React-Hook”useNavigate“不能在回调内部调用”这是如此奇怪，我读了，这应该是工作我认为这可能是一个错误，所以我提出了一个@Kid四更新的代码，你现在可以试试吗？