时间戳

首页 > 解决方案 > 为什么要使用路由器 useNavigate 时出现此错误

reactjs - 为什么要使用路由器 useNavigate 时出现此错误

问题描述

我学习了 React，但无法理解如何解决这个简单的错误：

我有一个Codesandbox。

我有这个代码：

/* 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;

这条线不起作用是原因const navigate = useNavigate();，错误是这样的：

错误：无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

我想要的只是在WithAuthorization检测到错误路径时导航。

我是否应该改用 Redux 来执行此处理，发送 Redux 操作感觉如此荒谬？

标签： reactjsreact-router-domhigher-order-components

解决方案

该错误非常自我解释，您需要在函数组件和顶层使用钩子（您不能在函数内初始化它）所以试试这个：

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>
          );
  } 
};

推荐阅读