面临类型错误:无法读取未定义的属性(读取“push”) ),同时尝试在类组件中使用 useNavigate 钩子进行导航。
在 React Router v6 中,useNavigate 仅与函数组件兼容。当尝试在类组件(AddContacts)中使用它时,它仍然未定义,从而导致错误。
要解决此问题,有两个选项:
将 AddContacts 类组件重构为函数组件。这将允许您直接在函数中使用 useNavigate 挂钩。
创建自定义 withRouter HOC 以将路由属性(包括 useNavigate)注入到 AddContacts 组件中。
这是一个自定义 withRouter HOC 示例:
const withRouter = (WrappedComponent) => (props) => { const navigate = useNavigate(); return ( <WrappedComponent {...props} navigate={navigate} /> ); };
然后,使用 HOC 装饰 AddContacts 组件:
export default withRouter(AddContacts);
这会将导航属性传递给 AddContacts 组件,并允许您按预期使用它。
在 React Router v6 中,导航 API 已更改。不再直接使用历史对象。相反,有一个导航函数,它接受一个或两个参数:一个目标路径和一个用于替换或状态的可选“选项”对象。
要以编程方式导航,请使用以下语法:
this.props.navigate('/');
以上是如何使用类组件在 React Router v6 中以编程方式重定向?的详细内容。更多信息请关注PHP中文网其他相关文章!