面臨類型錯誤:無法讀取未定義的屬性(讀取“push”) ),同時嘗試在類別元件中使用useNavigate 鉤子進行導航。
在 React Router v6 中,useNavigate 僅與函數元件相容。當嘗試在類別元件(AddContacts)中使用它時,它仍然未定義,從而導致錯誤。
要解決此問題,有兩個選項:
將AddContacts 類別元件重構為函數組件。這將允許您直接在函數中使用 useNavigate 掛鉤。
建立自訂 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 元件,並允許您按預期使用它。
在 React Router v6 中,導覽 API 已變更。不再直接使用歷史物件。相反,有一個導航函數,它接受一個或兩個參數:一個目標路徑和一個用於替換或狀態的可選“選項”物件。
要以程式設計方式導航,請使用以下語法:
this.props.navigate('/');
以上是如何使用類別元件在 React Router v6 中以程式方式重新導向?的詳細內容。更多資訊請關注PHP中文網其他相關文章!