如何處理 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中文網其他相關文章！