Bagaimana untuk Mengalihkan Secara Pemrograman dalam React Router v6 dengan Komponen Kelas?

Masalah dalam Mengubah Hala Secara Pengaturcaraan ke Laluan dalam React Router v6

Isu

Menghadapi Ralat Jenis: Tidak dapat membaca sifat yang tidak ditentukan (membaca 'push' ) semasa cuba menavigasi menggunakan cangkuk useNavigate dalam komponen kelas.

Sebab

Dalam React Router v6, useNavigate hanya serasi dengan komponen fungsi. Apabila cuba menggunakannya dalam komponen kelas (AddContacts), ia kekal tidak ditentukan, mengakibatkan ralat.

Penyelesaian

Untuk menyelesaikan isu ini, terdapat dua pilihan:

1. Tukar AddContacts kepada Komponen Fungsi

Faktor semula komponen kelas AddContacts kepada komponen fungsi. Ini akan membolehkan anda menggunakan cangkuk useNavigate terus dalam fungsi.

2. Gunakan Custom withRouter HOC (Higher Order Component)

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.

Nota tentang Perubahan API Navigasi

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!