首页  >  文章  >  web前端  >  如何使用类组件在 React Router v6 中以编程方式重定向?

如何使用类组件在 React Router v6 中以编程方式重定向?

Patricia Arquette
Patricia Arquette原创
2024-11-01 06:55:30144浏览

How to Programmatically Redirect in React Router v6 with Class Components?

React Router v6 中以编程方式重定向到路由的问题

问题

面临类型错误:无法读取未定义的属性(读取“push”) ),同时尝试在类组件中使用 useNavigate 钩子进行导航。

原因

在 React Router v6 中,useNavigate 仅与函数组件兼容。当尝试在类组件(AddContacts)中使用它时,它仍然未定义,从而导致错误。

解决方案

要解决此问题,有两个选项:

1.将 AddContacts 转换为函数组件

将 AddContacts 类组件重构为函数组件。这将允许您直接在函数中使用 useNavigate 挂钩。

2.使用自定义 withRouter HOC(高阶组件)

创建自定义 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 组件,并允许您按预期使用它。

关于导航 API 更改的注意事项

在 React Router v6 中,导航 API 已更改。不再直接使用历史对象。相反,有一个导航函数,它接受一个或两个参数:一个目标路径和一个用于替换或状态的可选“选项”对象。

要以编程方式导航,请使用以下语法:

this.props.navigate('/');

以上是如何使用类组件在 React Router v6 中以编程方式重定向?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn