如何修復 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>

透過使用這些解決方案，您可以在React Router v6 中以編程方式有效導航，並避免未定義的導航錯誤。

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

以上是如何修復 React Router v6 中的「TypeError：無法讀取未定義的屬性（讀取「push」）」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！