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

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中文网其他相关文章！