Bagaimana untuk Mengalihkan Pengaturcaraan dalam React Router v6 daripada Komponen Kelas?

Dalam React Router v6, bagaimana saya boleh mengubah hala secara atur cara ke laluan tertentu daripada komponen kelas?

Masalah:

Apabila cuba mengubah hala secara atur cara ke laluan lain daripada komponen kelas dalam React Router v6, anda mungkin menghadapi ralat berikut:

TypeError: Cannot read properties of undefined (reading 'push')

Ralat ini berlaku kerana prop navigasi tidak tersedia pada komponen kelas dalam v6 . Sebaliknya, ia hanya boleh diakses oleh komponen berfungsi.

Penyelesaian:

Terdapat dua cara untuk menyelesaikan isu ini:

1. Tukar komponen kelas kepada komponen fungsi:

   • Tukar komponen kelas AddContacts kepada komponen berfungsi menggunakan cangkuk (cth., useState, useEffect dan useNavigate).

2. Buat tersuai denganRouter HOC:

   • Buat Komponen Pesanan Tinggi (HOC) dipanggil denganRouter yang menyuntik prop navigasi dan lain-lain Tindakbalas cangkuk Penghala ke dalam komponen yang dibalut.
   • Hias komponen AddContacts dengan withRouter HOC dengan cara berikut:

import withRouter from './withRouter'; // Change this to the path of your custom HOC file

export default withRouter(AddContacts);

Ini akan menyediakan navigasi sandarkan kepada komponen AddContacts.

Nota Tambahan:

Dalam React Router v6, fungsi navigasi bukan lagi objek tetapi fungsi yang mengambil laluan sasaran sebagai hujah pertama dan objek pilihan pilihan sebagai hujah kedua.

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

Ini bermakna sintaks untuk navigasi juga telah berubah. Untuk menavigasi ke laluan menggunakan navigasi, gunakan fungsi seperti berikut:

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

Dengan mengikuti salah satu daripada penyelesaian di atas, anda seharusnya dapat mengubah hala secara atur cara ke laluan berbeza dalam React Router v6.

Atas ialah kandungan terperinci Bagaimana untuk Mengalihkan Pengaturcaraan dalam React Router v6 daripada Komponen Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!