如何使用類別元件在 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中文網其他相關文章！