React钩子只能在函数组件或自定义React钩子中调用。为了使用访问
我正在从类组件中调用一个函数组件。这是我的功能组件
import React, { useState, useEffect } from "react";
import {useNavigate} from "react-router";
const UtilsExt = () => {
const navigate = useNavigate();
navigate('/');
};
export default UtilsExt;
我从类组件的按钮单击事件调用上面的内容。当我这样做的时候，我会得到这个错误。
错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
- React和渲染器的版本可能不匹配(例如React DOM(
- 你可能违反了胡克规则
- 同一应用程序中可能有多个React副本
navigate函数，您需要创建一个包装器组件或自定义withNavigateHOC，以将navigate作为道具传递给类组件。
包装机
const MyComponentWithNavigation = props => {
const navigate = useNavigate();
return <MyClassComponent {...props} navigate={navigate} />;
};
用法：
<Route path="..." element={<MyComponentWithNavigation />} />
HOC
const withNavigate = Component => props => {
const navigate = useNavigate();
return <Component {...props} navigate={navigate} />;
};
用法：
const MyComponentWithNavigation = withNavigation(MyClassComponent);
<Route path="..." element={<MyComponentWithNavigation />} />
访问navigate功能
在类组件中，从props访问navigate。
this.props.navigate("/");