如何在 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);

這將提供導覽

這將提供導覽

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

在React Router v6中，導覽函數不再是一個對象，而是一個將目標路徑作為參數的函數第一個參數和可選選項對像作為第二個參數。

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

這表示導航的語法也改變了。若要使用導航導航至路由，請按如下方式呼叫函數：透過執行上述任一解決方案，您應該能夠以程式設計方式重定向到 React Router v6 中的不同路由。

以上是如何在 React Router v6 中以程式設計方式從類別元件重新導向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！