如何处理 React Router v6 类组件中的编程重定向？

理解问题：React Router v6 中的重定向

与早期版本相比，React Router v6 中的编程导航提出了独特的挑战。在之前的迭代中普遍存在的类组件遇到了未定义的导航属性，导致 TypeError。

问题原因

React Router v6 引入了导航策略的转变，远离了直接使用历史对象。相反，它采用导航，这是一种接受目标路径和可选选项的功能性 API。此更改影响了类组件，其中导航道具不再自动访问。

解决问题

要解决此问题，有两种主要方法：

1. 将类组件转换为函数组件：
   这种方法涉及将类组件转换为函数组件，这样就可以直接使用react-router-dom的钩子，包括useNavigate。

2. 创建自定义 withRouter 高阶组件：
   如果转换为函数组件不可行，您可以创建一个自定义高阶组件 (HOC)，它本质上是注入导航prop 到目标组件中。下面是一个名为 withRouter 的 HOC 示例：

   <code class="js">const withRouter = WrappedComponent => props => {
     const navigate = useNavigate();
     return (
       <WrappedComponent
         {...props}
         navigate={navigate}
       />
     );
   };</code>

   登录后复制

实现解决方案

创建 withRouter HOC 后，将其应用到目标类组件， AddContacts，如下所示：

<code class="js">export default withRouter(AddContacts);</code>

这会将导航属性公开给包装的组件，允许您执行编程导航。

导航 API 更改

除了从类组件的切换，React Router v6 还引入了导航 API 的更改。您现在必须调用导航函数，传递目标路径和任何可选状态或替换标志，而不是以前使用的历史对象。

<code class="js">this.props.navigate("/");</code>

通过实现上述解决方案之一并了解更新的导航 API ，您可以成功地从 React Router v6 中的类组件执行编程重定向。

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