Mengapa subrutin bersarang tidak berkesan dalam Router React 4.3 dan bagaimana menyelesaikan masalah ini?

React Router 4.3 Penjelasan terperinci mengenai konfigurasi penghalaan bersarang dan penyiasatan masalah

Apabila membina aplikasi menggunakan React Router 4.3, konfigurasi routing bersarang yang betul adalah penting. Artikel ini akan menganalisis masalah kegagalan penghalaan bersarang biasa dan menyediakan penyelesaian yang berkesan.

Katakan anda ingin bersarang subroutine /course/coursedetails /course/coursedetails/coursecatalog , tetapi anda mendapat ralat 404 ketika mengakses subrutin. Ini biasanya disebabkan oleh laluan induk yang mempunyai atribut exact dikonfigurasikan.

Mari kita menganalisis kesilapan biasa:

Contoh konfigurasi ralat:

Anggapkan bahawa konfigurasi laluan induk di app.js adalah seperti berikut:

 // app.js
<route exact path="/course/coursedetails" component="{CourseDetails}"></route>

Konfigurasi subrutin di dalam komponen CourseDetails.js adalah seperti berikut:

 // coursedetails.js
<route path="/course/coursedetails/coursecatalog" component="{CourseCatalog}"></route>

Oleh kerana laluan induk di app.js menggunakan atribut exact , React Router akan sesuai dengan laluan /course/coursedetails dengan tepat. Apabila mengakses /course/coursedetails/coursecatalog , React Router tidak terus memadankan subrutin ke bawah disebabkan oleh pemadanan yang tidak lengkap dari laluan induk, mengakibatkan ralat 404.

Penyelesaian:

Penyelesaiannya mudah, hanya keluarkan atribut exact dalam laluan induk:

Contoh konfigurasi yang betul:

Ubah suai konfigurasi laluan induk di app.js :

 // app.js
<route path="/course/coursedetails" component="{CourseDetails}"></route>

Konfigurasi subrutin di CourseDetails.js tetap tidak berubah:

 // coursedetails.js
<route path="/course/coursedetails/coursecatalog" component="{CourseCatalog}"></route>

Dengan mengeluarkan atribut exact , Router React akan sepadan dengan laluan induk /course/coursedetails , dan kemudian terus memadankan laluan anaknya /course/coursedetails/coursecatalog , dengan itu menjadikan komponen sub-routing dengan betul.

Saya berharap analisis dan penyelesaian di atas dapat membantu anda menyelesaikan masalah kegagalan penghalaan bersarang di React Router 4.3. Pastikan laluan itu konsisten dan periksa sama ada nama komponen sepadan dengan konfigurasi penghalaan.

Atas ialah kandungan terperinci Mengapa subrutin bersarang tidak berkesan dalam Router React 4.3 dan bagaimana menyelesaikan masalah ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!