Bagaimana untuk Mengendalikan Pengalihan Terprogram dalam Komponen Kelas Penghala React v6?

Memahami Isu: Ubah hala dalam React Router v6

Navigasi terprogram dalam React Router v6 memberikan cabaran unik berbanding versi terdahulu. Komponen kelas, yang lazim dalam lelaran sebelumnya, menghadapi prop navigasi yang tidak ditentukan, mengakibatkan TypeError.

Punca Isu

React Router v6 memperkenalkan peralihan dalam strategi navigasi, beralih dari penggunaan langsung objek sejarah. Sebaliknya, ia menggunakan navigasi, API berfungsi yang menerima laluan sasaran dan pilihan pilihan. Perubahan ini telah memberi kesan kepada komponen kelas, yang mana prop navigasi tidak lagi boleh diakses secara automatik.

Menyelesaikan Isu

Untuk menyelesaikan isu ini, terdapat dua pendekatan utama:

1. Menukar Komponen Kelas kepada Komponen Fungsi:
   Pendekatan ini melibatkan penukaran komponen kelas kepada komponen fungsi, yang membenarkan penggunaan terus cangkuk react-router-dom, termasuk useNavigate.


Melaksanakan Penyelesaian

<code class="js">const withRouter = WrappedComponent => props => {
  const navigate = useNavigate();
  return (
    <WrappedComponent
      {...props}
      navigate={navigate}
    />
  );
};</code>

Salin selepas log masuk
Setelah anda mencipta withRouter HOC, gunakannya pada komponen kelas sasaran, AddContacts, seperti berikut:

Ini akan mendedahkan prop navigasi kepada komponen yang dibalut, membolehkan anda melakukan navigasi program.

Perubahan API Navigasi

<code class="js">export default withRouter(AddContacts);</code>

Dengan melaksanakan salah satu daripada penyelesaian yang dinyatakan di atas dan memahami API navigasi yang dikemas kini , anda boleh berjaya melakukan ubah hala terprogram daripada komponen kelas dalam React Router v6.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Pengalihan Terprogram dalam Komponen Kelas Penghala React v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!