Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengendalikan Pengalihan Terprogram dalam Komponen Kelas Penghala React 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.
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.
Untuk menyelesaikan isu ini, terdapat dua pendekatan utama:
Melaksanakan Penyelesaian
<code class="js">const withRouter = WrappedComponent => props => { const navigate = useNavigate(); return ( <WrappedComponent {...props} navigate={navigate} /> ); };</code>Setelah anda mencipta withRouter HOC, gunakannya pada komponen kelas sasaran, AddContacts, seperti berikut:
Perubahan API Navigasi
<code class="js">export default withRouter(AddContacts);</code>Selain daripada suis daripada komponen kelas, React Router v6 juga memperkenalkan perubahan pada API navigasi. Daripada objek sejarah yang digunakan sebelum ini, anda kini mesti menggunakan fungsi navigasi, melepasi laluan sasaran dan sebarang keadaan pilihan atau menggantikan bendera.
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!