Mengapa Penghala Reaksi Saya Tidak Berfungsi Selepas Muat Semula Halaman atau Kemasukan URL Manual?

Berurusan dengan URL dalam React-router

URL Tidak Berfungsi pada Muat Semula atau Penaipan Manual

Apabila menggunakan React-Router, terdapat perbezaan antara penghalaan sisi pelayan dan pihak pelanggan. Biasanya, apl anda bermula dengan menghantar permintaan awal kepada pelayan untuk fail HTML statik yang mengandungi skrip React. Setelah dimuatkan, klien mengendalikan perubahan URL yang berikutnya, tanpa membuat permintaan pelayan baharu.

Masalahnya: Apabila anda memuat semula atau menaip secara manual URL yang sejajar dengan laluan sebelah pelayan (cth. , /joblist) semasa dalam mod penghalaan sisi klien, ia tidak akan memaparkan paparan yang dimaksudkan. Sebaliknya, anda mungkin menghadapi ralat "Tidak Dapat /joblist".

Penghalaan Sebelah Pelayan lwn. Laluan Sebelah Klien

Sebelah Pelayan: Pelayan mengendalikan semua URL penghalaan. Dalam tapak HTML statik, pelayan akan menghantar halaman HTML untuk URL tertentu, seperti /joblist.

Penghalaan Sisi Pelanggan: Penghala Reaksi mengendalikan penghalaan URL di bahagian klien . Daripada meminta halaman baharu daripada pelayan, ia mengemas kini kandungan yang dipaparkan secara dinamik berdasarkan perubahan URL.

Menyelesaikan Isu

Untuk membetulkannya, anda perlu mewujudkan laluan pada kedua-dua pelayan dan pihak pelanggan. Berikut adalah cara yang mungkin untuk berbuat demikian:

Sejarah Hash (Pendahulu Sejarah Penyemak Imbas)

Pendekatan ini menggunakan URL dengan awalan cincang (#), seperti /joblist#/about. Bahagian selepas cincang tidak dihantar ke pelayan, jadi pelayan sentiasa melihat URL akar (/). Bahagian pelanggan, React-Router mengendalikan bahagian #/about.

Keburukan:

• URL yang tidak menarik
• Tiada pemaparan sebelah pelayan , memberi impak negatif SEO.

Catch-All

Sediakan laluan catch-all pada pelayan. Contohnya, jika pelayan menerima sebarang URL yang tidak sepadan dengan laluan tertentu, ia menghantar fail index.html. Ini memastikan bahawa tidak kira apa URL yang ditaip, apl React dimuatkan.

Keburukan:

• Persediaan yang lebih kompleks
• SEO Suboptimum , kerana semua halaman kembali sama kandungan.

Hibrid

Pendekatan ini menggabungkan catch-all dengan laluan sebelah pelayan khusus untuk halaman penting. Anda boleh menyediakan fail HTML statik untuk halaman ini, menjadikan kandungannya tersedia untuk enjin carian.

Keburukan:

• Persediaan yang lebih kompleks
• Faedah SEO terhad
• Penduaan kod (memaparkan kandungan pada kedua-dua pelanggan dan pelayan).

Isomorfik

Dalam pendekatan ini, kedua-dua pelayan dan klien melaksanakan kod JavaScript yang sama. Ini menyelesaikan isu dengan menghantar penanda yang sama kepada klien, sama ada peralihan halaman berlaku pada pelayan atau pihak klien.

Keburukan:

• Pelayan mesti menjalankan JavaScript (selalunya Node.js)
• Cabaran alam sekitar
• Keluk pembelajaran yang curam

Memilih Penyelesaian yang Tepat

Pertimbangkan perkara berikut faktor:

• Kesederhanaan: Catch-all ialah persediaan yang agak mudah.
• SEO: Isomorphic ialah penyelesaian optimum untuk SEO, tetapi ia memerlukan lebih banyak usaha.
• Teknologi Pelayan: Jika pelayan anda berjalan pada Node.js, isomorphic ialah pilihan yang sesuai.

Akhirnya, pilihan terbaik untuk anda bergantung pada keperluan khusus dan keupayaan teknikal anda.

Atas ialah kandungan terperinci Mengapa Penghala Reaksi Saya Tidak Berfungsi Selepas Muat Semula Halaman atau Kemasukan URL Manual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!