如何修复 React Router v6 中的“TypeError：无法读取未定义的属性（读取“push”）”错误？

在 React Router v6 中以编程方式导航

React Router v6 中的编程导航可能会出现“TypeError：无法读取未定义的属性（正在读取 '推'）”错误。当尝试从不存在的未定义的导航属性进行导航时，会发生这种情况。

原因：

useNavigate 挂钩是为函数组件设计的。类组件需要自定义高阶组件 (HOC) 或转换为函数组件。

解决方案 1：转换为函数组件

将 AddContacts 转换为函数组件并使用useNavigate:

<code class="javascript">import { useNavigate } from "react-router-dom";

const AddContacts = () => {
  const navigate = useNavigate();

  const onSubmit = (e) => {
    // ... submit logic ...
    navigate("/");
  };

  return (
    // ... form elements ...
  );
};</code>

解决方案 2：自定义 withRouter HOC

创建自定义 withRouter HOC：

<code class="javascript">const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

  return (
    <WrappedComponent {...props} navigate={navigate} />
  );
};</code>

并使用 HOC 包装 AddContacts :

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

更新了导航语法

在 React Router v6 中，导航函数的语法发生了变化：

<code class="javascript">navigate(to, options?);
// where to is the target path and options is an optional object with replace and/or state</code>

因此，导航语句变为：

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

通过使用这些解决方案，您可以在 React Router v6 中以编程方式有效导航，并避免未定义的导航错误。

以上是如何修复 React Router v6 中的“TypeError：无法读取未定义的属性（读取“push”）”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！