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

在 React Router v6 中，如何以编程方式从类组件重定向到特定路由？

问题：

当尝试以编程方式从React Router v6中的类组件重定向到不同的路由时，您可能会遇到以下错误：

TypeError: Cannot read properties of undefined (reading 'push')

发生此错误是因为导航属性在v6中的类组件上不可用。相反，它只能被函数组件访问。

解决方案：

有两种方法可以解决此问题：

1. 将类组件转换为函数组件：

   • 使用钩子（例如 useState、useEffect 和 useNavigate）将 AddContacts 类组件转换为函数组件。

2. 创建一个自定义的 withRouter HOC：

   • 创建一个名为 withRouter 的高阶组件（HOC），用于注入导航道具和其他React Router 挂钩到包装的组件中。
   • 按以下方式使用 withRouter HOC 装饰 AddContacts 组件：

import withRouter from './withRouter'; // Change this to the path of your custom HOC file

export default withRouter(AddContacts);

这将提供导航

附加说明：

在 React Router v6 中，导航函数不再是一个对象，而是一个将目标路径作为参数的函数第一个参数和可选选项对象作为第二个参数。

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: State }
  ): void;
  (delta: number): void;
}

这意味着导航的语法也发生了变化。要使用导航导航到路由，请按如下方式调用该函数：

// Example usage
this.props.navigate("/");

通过执行上述任一解决方案，您应该能够以编程方式重定向到 React Router v6 中的不同路由。

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