Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengalihkan Secara Pemrograman dalam React Router v6 dengan Komponen Kelas?
Menghadapi Ralat Jenis: Tidak dapat membaca sifat yang tidak ditentukan (membaca 'push' ) semasa cuba menavigasi menggunakan cangkuk useNavigate dalam komponen kelas.
Dalam React Router v6, useNavigate hanya serasi dengan komponen fungsi. Apabila cuba menggunakannya dalam komponen kelas (AddContacts), ia kekal tidak ditentukan, mengakibatkan ralat.
Untuk menyelesaikan isu ini, terdapat dua pilihan:
Faktor semula komponen kelas AddContacts kepada komponen fungsi. Ini akan membolehkan anda menggunakan cangkuk useNavigate terus dalam fungsi.
Buat custom withRouter HOC untuk menyuntik prop laluan, termasuk useNavigate, ke dalam komponen AddContacts.
Berikut ialah contoh tersuai dengan Router HOC:
const withRouter = (WrappedComponent) => (props) => { const navigate = useNavigate(); return ( <WrappedComponent {...props} navigate={navigate} /> ); };
Kemudian, hiaskan komponen AddContacts dengan HOC:
export default withRouter(AddContacts);
Ini akan menghantar prop navigasi ke komponen AddContacts dan membolehkan anda menggunakannya seperti yang diharapkan.
Dalam React Router v6, API navigasi telah berubah. Objek sejarah tidak lagi digunakan secara langsung. Sebaliknya, terdapat fungsi navigasi yang mengambil satu atau dua argumen: laluan sasaran dan objek "pilihan" pilihan untuk menggantikan atau keadaan.
Untuk menavigasi secara pengaturcaraan, gunakan sintaks berikut:
this.props.navigate('/');
Atas ialah kandungan terperinci Bagaimana untuk Mengalihkan Secara Pemrograman dalam React Router v6 dengan Komponen Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!